Javascript 当DOM元素位于场景上方时，THREE.JS控件不起作用

我试图将标签作为元素放置在

position:absolute在一个3.JS场景上。问题在于，当鼠标位于其中一个标签（下面示例中的红色框）上时，触发控件的事件会被标签“停止”，并且不会传播到渲染器

我复制了一个最小版本的代码来查看问题



身体{
边际：0px；
溢出：隐藏；
}
#覆盖层{
位置：绝对位置；
最高：40%；
左：40%；
宽度：20%；
身高：20%；
背景色：#f00；
填充：3%；
文本对齐：居中；
颜色：#fff；
框大小：边框框；
}
我是一个位置：绝对的div
var容器；
摄像机、场景、渲染器；
var制服、材质、网目；
风险值控制；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
var aspect=window.innerWidth/window.innerHeight；
摄像机=新的三个透视摄像机（45，纵横比，0.11500）；
摄像机位置设置（1,1,1）；
场景=新的三个。场景（）；
renderer=new THREE.WebGLRenderer（）；
container.appendChild（renderer.domeElement）；
renderer.setSize（window.innerWidth、window.innerHeight）；
controls=新的三个.OrbitControls（this.camera、this.renderer.DoElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var材料=新的三网格基本材料({
颜色：0x00ff00
});
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

这里有一个指向类似项目的链接，在该项目中，标签不会停止事件的传播，以便相机可以跟随鼠标交互。然而，我还没有发现是什么让这个例子起作用，而我的却不起作用。

如何使OrbitControls仍在标签后面工作？
总结评论中的答案：

如果您不需要覆盖中的任何鼠标事件，只需通过css禁用事件处理即可：

<div class="overlay" style="pointer-events: none">...</div>

这样，所有到达父级的鼠标事件（包括来自覆盖的事件）都将由控件处理（一种特殊情况是，通过省略dom元素（或为OrbitControls构造函数指定
document.documentElement
）在根级处理所有事件）

如果要处理覆盖中的某些事件，例如单击，可以使用
stopPropagation（）
阻止它们转发到动态观察控件：

试试这个：
controls=newthree.OrbitControls（this.camera）。默认情况下，
domeElement
将成为
文档
谢谢@prisoner849！它解决了这个问题。你想写答案还是我来写？你可能想添加
指针事件：无
到overlay元素的css，这也将解决问题Event better solution@Martinshuhfuß。更改渲染器的DomeElement可以修复覆盖问题，但会导致链接到项目中轨道控件的摄影机出现其他问题。
指针事件：无效果最好。只需注意浏览器兼容性。@Martinshuhfuß有没有可能有类似的解决方案，但允许标签上的“点击”事件？
<div class="overlay" style="pointer-events: none">...</div>

<div class="parent" style="position:relative">
  <canvas ... /> <!-- this is the canvas from renderer.domElement -->
  <div class="overlay"></div>
</div>

const controls = new THREE.OrbitControls(camera, document.querySelector('.parent'));

overlayEl.addEventListener('click', event => {
  event.stopPropagation();

  // handle event
});