Raycast selects the correct mesh but highlights unrelated meshes as well

[modithak_K]

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;
window.content.getObjectByName(“c-image-posters-1”);

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?

[Mugen87]

@modithak_K

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.

[modithak_K]

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.

Selecting faces with Raycaster in ThreeJS with STL Loader

I am currently working on a .stl viewer using Three.js. The goal is select and calculate certain areas. For this area calculation I need to be able to select (e.g. change the color) faces. I have found something similar, but from what I have seen in my own research this only seems to be working with ready made meshes (like the cube in the example). I am looking to implement this example in my own code. It is evident that something like this has been done before, but I just can’t seem to impl…

Selecting one faceindex

A very rough solution can be like that: https://jsfiddle.net/prisoner849/8jubLsy7/ var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); var intersects; var prevIndex = -1; var prevColor = new THREE.Color(); document.addEventListener("mousedown", onMouseDown, false); function onMouseDown(event){ mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; raycaster.setFromCamera(mouse, camera); intersects = …

THREE.js obj loader with face selection

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?

[Mugen87]

@modithak_K

The next place I am stuck is applying texture to the selected faces

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.

@modithak_K

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

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