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

Question

舉例來說，如果我用鼠標點在現場轉了一圈，能夠檢測到。我到處尋找，似乎無法找到任何東西。 Three.js文檔也沒有真正談論它。

Answer 1

首先你應該添加事件偵聽器，如「鼠標移動」，「鼠標按下」。

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。