所以我用鼠标移动设置了光线投射器以更改光标。它很棒!但是,如果将鼠标悬停在没有任何中断的空白区域并且发生未定义的错误,则只有将鼠标悬停在模型上方或框本身上方时,它才能按预期工作。将光标移到指针上,然后将其移开,但鼠标随后将鼠标悬停在该框后面的模型上,并且光标变为自动,但是如果我将鼠标悬停在没有任何内容的框上之后将鼠标悬停在空白区域,则该光标仍为指针而不是更改为自动
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:无法读取在以下位置未定义的属性“ object”HTMLDocument.onDocumentMouseMove
有什么建议吗?
您需要检查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')
}
}