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.