javascript - Three.js 事件影响 DOM

Question

简单的can/can't question.

能否在three.js场景中设置点击事件来改变DOM？

例如单击场景中的对象，场景外的面板可见？

干杯。

Answer 1

您必须像对待任何其他元素一样将点击事件附加到渲染器 DOM 元素

renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );

然后计算点击发生的位置

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

和光线转换以确定您指向的对象

raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );

您可以在可拖动立方体示例中看到它的使用 http://threejs.org/examples/#webgl_interactive_draggablecubes

在你反对之后，你可以对任何其他(可访问的)dom 元素做一些事情，即在屏幕外显示对象属性/位置等

如果你有这样的想法

myObject.addEventListener

然后，您将不得不自己编写代码，并且仍然必须像上面的示例那样以某种方式完成，因为渲染器目标本质上是一个 Canvas - 一个没有关于它所持有的对象信息的图像