如何在three.js中與場景中的對象進行交互？

Question

例如，如果我用鼠標指向場景中的一個圓圈，則能夠檢測到該圓圈。 我到處都看了，似乎什么也找不到。 Three.js文檔也沒有真正談論它。

Answer 1

首先，您應該添加“ 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。