防止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;
}

• 两者都是身体的直接孩子.

• 脚本在内容之后执行.

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

Answer 1

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

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

否则,控件将设置document为其域并捕获所有事件.

因此,无论您使用哪种控制,renderer.domElement都要添加部分