Raycaster 对象未定义 mouseover Three.js答案

【问题标题】：Raycaster object undefined mouseover Three.jsRaycaster 对象未定义 mouseover Three.js
【发布时间】：2020-07-28 23:54:27
【问题描述】：

所以我用 mousemove 设置了 raycaster 来更改光标它工作得很好！但是，只有当鼠标悬停在模型上方或框本身上方时，它才会按预期工作，如果您将鼠标悬停在没有任何东西的空白处，它会中断并发生未定义的错误......所以如果我将鼠标悬停在改变了光标到一个指针然后移开它但是鼠标然后悬停在它工作的框后面的模型上并且光标变为自动但是如果我在悬停在没有任何东西的框上后悬停到空白区域光标仍然是一个指针而不是改为自动

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

错误：

未捕获的类型错误：无法读取未定义的属性“对象” HTMLDocument.onDocumentMouseMove

有什么建议吗？

【问题讨论】：

标签： javascript three.js raycasting

【解决方案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')
        }
    }

【讨论】：