I'm currently using a raycaster with mousemove to change the cursor and it's working really well! However, I've noticed a little issue - it seems to only work properly when the mouse is over either the model or the box itself. If I hover into a blank space where there's nothing, it kind of breaks and I get an undefined error... For example, if I hover over the box and the cursor changes to a pointer, then move off the box but end up hovering over the model behind it, the cursor changes to auto as expected. But if I then hover into a blank space where there is nothing, the cursor stays as a pointer instead of changing to auto.
function onDocumentMouseMove(event) {
event.preventDefault();
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children, true);
if (intersects[0].object.name == 'MaBox') {
container.style.cursor = 'pointer';
console.log('Mouse is over')
} else {
container.style.cursor = 'auto';
console.log('Mouse is off')
}
}
Error:
Uncaught TypeError: Cannot read property ‘object’ of undefined at HTMLDocument.onDocumentMouseMove
Does anyone have any suggestions on how to fix this?