防止 WebGL Three.js 容器捕获滚动事件

Question

我有一个全屏的three.js 应用程序作为背景，并希望在其上放置文本作为覆盖，我希望能够滚动。

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

three.js-application 是一个 <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 的直系子代。

• 脚本在内容之后执行。

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

Answer 1

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

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

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

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