例如,如果我用鼠标指向场景中的一个圆圈,则能够检测到该圆圈。我到处都看了,似乎什么也找不到。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。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句