Javascript 如何在three.js中与场景中的对象交互？

例如，如果我用鼠标指向场景中的一个圆，就能够检测到它。我到处找了，似乎什么也没找到。Three.js文档也没有真正讨论它。

首先，您应该添加事件侦听器，如“mousemove”、“mousedown”

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false); 

因此，当您将鼠标移动到圆上时，需要一个事件。所以，让我们发出一个警告，鼠标在圆圈上移动时，您将得到一个警告

function onDocumentMouseDown(event) {

    event.preventDefault();

    mouseYOnMouseDown = event.clientY - windowHalfY;
    mouseXOnMouseDown = event.clientX - windowHalfX;

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    vector = vector.unproject(camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects(circleObj, true); // Circle element which you want to identify

    if (intersects.length > 0) {
        alert("Mouse on Circle");
    }

}

---

在three.js中，我们使用raycaster指向任何对象。浏览three.js文档中的raycaster。

是否“挑选”了您要找的单词？是的，就是这样。这是一个非常好的答案。非常感谢你！不要每次都实例化一个新的光线投射器。创建一个并重用它。有关要使用的新模式，请参见。