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

How can I interact with objects in the scene in three.js?

本文关键字：对象 交互 three js      更新时间：2023-09-26

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

首先，你应该添加事件监听器，如' mousmove '， '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中，我们使用光线投射器来指向任何物体。查看three.js文档中的光线投射器

相关文章：