My attempt to change the color of a mesh on mouse hover is not functioning as expected. Instead of coloring only one mesh red, every single mesh is being filled with the color.
Upon inspecting the intersected objects during debugging, it shows only one element.
I am currently using "three" version 0.132.2 in an angular/typescript environment.
function render() {
raycaster.setFromCamera( mouse, camera );
const intersects = raycaster.intersectObjects( scene.children, false );
if (intersects[0]) {
console.log(intersects[0].object.id, (scene.getObjectById(intersects[0].object.id) as THREE.Mesh));
// @ts-ignore
(scene.getObjectById(intersects[0].object.id) as THREE.Mesh).material.color.set('#f00');
}
renderer.render( scene, camera );
}