I have a GLB model with multiple parts and hierarchy. My goal is to highlight a specific part of the assembly on mouseover.
The code snippet I am using for this functionality is as follows:
raycaster.setFromCamera( pointer, camera );
const intersects = raycaster.intersectObjects(scene.children, true);
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.color.set( INTERSECTED.currentColor );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentColor = INTERSECTED.material.color.getHex();
INTERSECTED.material = INTERSECTED.material.clone();
INTERSECTED.material.color.setHex( 0xffb300 );
}
} else {
if ( INTERSECTED ) INTERSECTED.material.color.set( INTERSECTED.currentColor );
INTERSECTED = null;
}
However, I am facing an issue where only one face of the mesh changes color upon interaction, while the rest of the mesh remains unaffected. Despite several attempts, my limited experience in three.js makes it challenging to find a solution.