Block Raycasting

I have a gltf model between two objects.
I want to prevent raycaster from casting through other objects

const gltfMesh = []
const objMesh = []
window.addEventListener("click", (event) => {
  raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(gltfMesh);
 const blockIntersects = raycaster.intersectObjects(objMesh);
  var block
  if (blockIntersects.length) {
    block = true
 console.log('objMesh hit');

  if (intersects.length && block != true) {

    console.log('gltfMesh hit');

when I click on the gltf model directly or through the objects something happens
I want raycasting the model directly, not when modal is behind the objects
Actually, I want the raycaster to work when I click directly on the model and not work when I click on other objects while the model is behind it.
the codes above not work correctly because the model is between objects.
I hope I have explained correctly

I think I know what you mean.

I would raycast both the object and gltfMesh together, and check which one is first.

const intersects = raycaster.intersectObjects([gltfMesh,objMesh]);

if (intersects.length) {
if (intersects[0].object == objMesh) console.log(‘objMesh hit’);
else console.log(‘gltfMesh hit’);

I got this error from this line :

const intersects = raycaster.intersectObjects([objMesh, gltfMessh]);

three.module.js:44998 Uncaught TypeError: Cannot read properties of undefined (reading ‘test’)
at intersectObject (three.module.js:44998:1)
at Raycaster.intersectObjects (three.module.js:44978:1)

Is is possible you have a typo in ‘gltfMessh’?

No, I checked again. I just made a mistake here

the gltlMesh has two objects and objMesh has 3 instancedmesh objects

It’s a little bit hard to understand where your error is without more detail. Are objMesh and gltfMesh objects in the scene, or arrays of objects? intersectsObjects requires an array of objects as it’s first argument.

If you want more help, I suggest you add more code, or even better, share a live example. In principle though, I think what you want to do is to only raycast once with both of your blocking objects and glftmesh as targets. The raycaster returns the intersections in order of distance, so you can use that to write some logic about what to do.


I want it to not be clickable when the fox model is behind the cubes
The problem is that it is now gltfmodel clickable even when behind cubes

The main problem with your example is that you are adding arrays to the first argument array of intersectsObjects. You need to have an array of objects, not an array of array. You can use the spread operator to fix that, change the following lines in your code:

  const intersects = raycaster.intersectObjects([...gltfMesh,...objMesh]);

  if (intersects.length) {
    if ( gltfMesh.includes(intersects[0].object)) {
      console.log("model hit");
    } else {
      console.log("cube hit");

There are other odd things in your code, such as it appears you are adding a listener in the ‘tick’ animation loop, that seems like it’s not necessary. You want to keep your animation loop as minimal as possible

I appreciate you dear Davidson.

Hello, I apologize for repeating this response after a year.
I still have a question,

These things are “gltf models.”
gltfMesh = [obj,obj1,obj2]
How can I choose obj1 by name from the gltfMesh array to stop raycasting?
All of the objects in the gltfMesh array should be raycast, but not obj1.
I have try this:
If (gltfMesh.includes(intersects[0]!= "obj1"))
but doesn’t work.

Kia ora,

It’s not clear to me what you are asking for but I’ll try to answer!

If it is possible, I would just avoid passing the object to the raycaster in the first place, then you will not need logic to check the raycasting result.

Without seeing how you set up you code or knowing what your intentions are, one possible way of rejecting ob1 as a result is to check if the first intersection( intersection[ 0 ] ) is obj1, and if it is, then check is there is a second intersection ( intersection[ 1 ] ).

All I want is for the obj1 inside the gltfMesh array to not be raycast Just like the objects inside the objMesh array, which cannot be raycasting with this line of code :
if ( gltfMesh.includes(intersects[0].object))
now the problem is I couldn’t select the obj1 model to avoid from raycasting in if statement.

Let me explain in general. I have two arrays of objects.
An array contains imported JLB models. (gltfMesh)
And the other array contains boxes. (objMesh)
In this current state, only the entire array of models can be intersect.
Now I want obj1 from the array of models not to be intersected
It means that obj2 and obj3 will be intersect, but obj1 will work like boxes in the boxes array and not intersects at all.

This may be correct, how can I check that the first intersection is obj1? And then prevent the raycasting of this object?

Sorry I’m not sure how to answer your questions unless you provide more context. A working example helps!