三.js 事件影响 DOM答案

【问题标题】：Three.js events effect the DOM三.js 事件影响 DOM
【发布时间】：2017-12-11 17:24:05
【问题描述】：

简单的可以/不能提问。

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

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

干杯。

【问题讨论】：

【解决方案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

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

【讨论】：