Raycast selects the correct mesh but highlights unrelated meshes as well

Use case is there is a mesh (ex:- room built with Blender and has different parts with names like Door, window, floor etc…). Mesh is loaded via gltf to the scene. User can select these mesh parts (door, window etc…) and change the texture from a given list.

What is working now in my code is;

  1. Loading gltf
  2. Raycast on mouseover and capture the mesh under the mouse cursor (door, window etc…)
  3. Apply the selected texture to the selected part

So raycasting & selecting code goes like below;

let intersects = this.raycaster.intersectObjects( this.customizableList ); // where customizable list has the meshes that can be selected for customization

let selectedMesh = intersects[ 0 ].object; //selectedMesh.name confirms that it has the expected object to customize.

selectedMesh .material.emissive.setHex( 0xff0000 ); //just highlight the selected mesh only.

What’s NOT working as expected is; it highlights some other mesh parts also! For example if selectedMesh is just the door, it highlights some unrelated mesh parts even if it’s NOT connected to selectedMesh!

So, to troubleshoot, without doing raycasting, I tried below code;

In above line window.content has the full scene details loaded from gltf. so now I specifically get the reference for “c-image-posters-1” mesh and resulting variable get the correct mesh. But changing it’s emmisive color still highlights some other unrelated meshes! Btw… names given to each mesh parts are unque!

See the image with wrong parts highlighted: https://imgur.com/67lo8ST

What may be the problem?

I guess the problem is that certain materials are shared between different meshes. In your scenario, however, you need a material per object.

I suggest you traverse through gltf.scene in onLoad() and clone all materials. Something like:

gltf.scene.traverse( function ( child ) {

	if ( child.material ) child.material = child.material.clone();

} );

If you now change the emissive color, only a single 3D object should be affected.

1 Like

Excellent, this line;

child.material = child.material.clone();

did the trick! I guess it’s not documented anywhere?

The next place I am stuck is applying texture to the selected faces (If I apply a color/image it applies to all the mesh part that is selected/highlighted). I have referred to below links already.

If you create the object with primitives selecting faces seems straight forward. But in my case how should I approach to tackle the problem?

My customizable objects is ALWAYS square shapes and no exceptions. So, after raycasting and highlighting the object if i do;

console.log(intersects[0].faceIndex); it returns a null. But in other samples this seems to return an index.

Should I consider anything special at modelling time (in blender) so that I can achieve face selecting?

This is more complicated since you would need a material per face. And this only works by defining groups data. It’s then possible to apply multiple materials to a mesh.

Strange. Do you mind demonstrating this with a live example?