Raycaster 对象未定义鼠标悬停 Three.js

Question

所以我用 mousemove 设置了 raycaster 来改变光标，效果很好！但是，如果您将鼠标悬停在空白 space 上，它只会在鼠标悬停在模型上方或框本身上方时按预期工作，那里没有任何东西会中断并且会发生未定义的错误……因此，如果我将鼠标悬停在框将光标更改为指针然后移开它但是鼠标然后将鼠标悬停在它工作的框后面的模型上并且光标更改为自动但是如果我将鼠标悬停在那里的框上后悬停到空白 space什么都没有光标仍然是指针而不是更改为 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')
    }
}

错误：

Uncaught TypeError: Cannot read property ‘object’ of undefined at HTMLDocument.onDocumentMouseMove

有什么建议吗？

Answer 1

您需要检查intersects的数组是否为空。否则没有索引0.

的元素

像这样：

    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 对象未定义鼠标悬停 Three.js

Raycaster object undefined mouseover Three.js

javascript

three.js

raycasting