javascript - 防止WebGL Three.js 容器捕捉滚动事件

Question

我有一个全屏 three.js 应用程序作为背景，我想将文本叠加在上面，我希望它能够滚动。

我的问题是显然 three.js WebGL 容器捕获所有滚动事件并且不允许滚动覆盖内容。

three.js 应用程序是一个 <canvas>元素，我的 CSS:

canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -9999;
}

这是主体和父级 <div>应该是可滚动的内容元素。

body {
   display:block;
}

.page-content {
    z-index: 1000;
    padding: 0;
}

• 两者都是 body 的直接 child 。

• 脚本在内容之后执行。

如何防止 Three.js 容器捕获滚动(例如滚轮)事件并将它们转发到 .page-content分区？

Answer 1

这实际上是一个控制问题。

你想设置:controls = new THREE.OrbitControls(camera, renderer.domElement);

否则，the controls will set document as it's domain并捕获所有事件。

因此，无论您使用哪个控件，都将 renderer.domElement 部分添加到它