I'm trying to point to some part of the object, the whole object is pointed

Questions
,
1

I’m trying to point to some part of the object, the whole object is pointed, I don’t know what the problem is, I tried many options, I decided to ask for help

Gif
hoverPieces

Code

    function hoverPieces() {
      // Material
      //const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
      raycaster.setFromCamera(mouse, camera);
      const intersects = raycaster.intersectObjects(scene.children, true);

      if (intersects.length > 0) {
        if (INTERSECTED != intersects[0].object) {
          if (INTERSECTED)
            INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
          INTERSECTED = intersects[0].object;
          INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
          INTERSECTED.material.emissive.setHex(0xff0000);
        }
      } else {
        if (INTERSECTED)
          INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
        INTERSECTED = null;
      }
    }

Gist Link: customizer.component.ts · GitHub

If needed Object (.glb)

2

intersects[0] points to the first intersected object. Try grabbing the last element in the intersects list instead.

3

I try but the same :frowning:

4

The problem is that all components of your kitchen share the same material. Hence, changing the color affects all components.

Consider to traverse through the loaded glTF and clone all materials. Something like:

gltf.scene.traverse( object => {

    if ( object.material !== undefined ) object.material = object.material.clone();

} );
1 Like
5

Thank you very much, 2 days could not understand why :heart_eyes: