Question

将3D collada（.dae）文件添加到场景中。 'DAE'文件包含名称为“monster”的几何体，id为“monster-mesh-skin”。我尝试将鼠标点击事件应用于几何体“怪物”。等，

var monster = dae.getChildByName("monster"); // get geometry
monster.addEventListener("click", meshClickHandler);

点击事件无效。我尝试了THREE.Vector3()和THREE.Ray，

var mouse3D = new THREE.Vector3();
mouse3D.x = event.clientX;
mouse3D.y = event.clientY;
mouse3D.z = 0.5;

var ray = new THREE.Ray(mouse3D);

var intersects = ray.intersectObjects(monster);
console.dir(intersects);

在文档点击处理程序上。在intersects变量中不包含任何值。

是否有任何解决方案可以将鼠标事件应用于3D模型并控制它？

Answer 1

看来你需要重新考虑这个方法。场景中的任何3D对象都仅作为对象的2D“绘图”存在，并且其本身不能附加标准DOM事件处理程序。

你想要的是文档本身的一般事件监听器来捕获鼠标点击，如下所示：

document.addEventListener( 'click', detectIntersect, false );

现在，在Three.js示例目录中有大量示例可以向您显示如何“单击您的对象”，但在3D术语中它被称为对象选择或< b>光线投射物体。搜索示例/帮助时，这些术语可能会有所帮助。看看这些例子：

http://threejs.org/examples/webgl_interactive_cubes.html http://threejs.org/examples/canvas_interactive_cubes_tween.html

最后一点，您可以使用R57或更早版本的Three.js库。我建议升级到最新版本，因为当所有人都在同一页面上时，从社区获得支持会更容易：）

希望有所帮助，保重。

如何为3D模型应用鼠标Click事件

1 个答案: