Question

例如，如果我将鼠标指向场景中的圆圈，则能够检测到它。我到处寻找，似乎找不到任何东西。 Three.js文档也没有真正谈论它。

Answer 1

首先，您应该添加事件监听器，例如＆＃39; mousemove＆＃39;，＆＃39; mousedown＆＃39;。

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。

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

1 个答案: