Raycaster object undefined mouseover Three.js

Question

So I have the raycaster set up with mousemove to change the cursor It works great! However it only works as intended when the mouse is either over the model or over the box themselves if you hover into blank space where there is nothing it kind of breaks and an undefined error occurs… So if I am hovering over the box which changes the cursor to a pointer and then move off it but the mouse then hovers over the model behind the box it works and the cursor changes to auto but if I hover into blank space after hovering on the box where there is nothing the cursor still remains 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

Any suggestions?

prisoner849 prisoner849 · Accepted Answer · 2020-04-15T21:09:06

You need to check that the array of intersects is not empty. Otherwise, there is no element of index 0.

Something like this:

    var intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length > 0) { // check the array

        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')
        }
    }

Raycaster object undefined mouseover Three.js

1 Answers