I currently have a raycaster functioning well in Three.js.
Below is the code snippet responsible for defining the action to be taken when the cursor hovers over an object within the scene:
function onDocumentMouseMove( event ){
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
if (intersects.length > 0) { // upon hovering over an object
// reduce object opacity to 75%
intersects[0].object.material.opacity = 0.75;
}
}
Simply activating the object's opacity to 0.75 when hovered over by the user. Nonetheless, I am seeking a way to revert this opacity back to 1 once the cursor moves away from the object.
Could someone explain how I can achieve this using the raycaster? My initial thought was to establish a boolean that would turn false after the cursor is no longer hovering over the object, but referencing the object only seems possible during the hover state.