Three.js & Dat.gui - TrackballControls renderer.domElement 禁用旋转和平移

Question

我正在尝试将 dat.gui 与一个非常简单的 three.js (r73) 场景一起使用，但是运行我遇到了一个问题，在添加 [=31 之后旋转和平移不起作用=] 到trackballControls 初始化。缩放按预期工作。

没有 renderer.domElement，我可以使用旋转、缩放、平移功能，但单击 dat.gui 界面滑块 "latch" 时，这很烦人且无法正常工作。此处描述的问题：Issue while using dat.GUI in a three.js example。

在此处查看了更多信息，但没有看到很好的解决方案：https://github.com/mrdoob/three.js/issues/828

也发现了这个问题。定义容器元素 aka renderer.domElement 不起作用。如果不旋转场景，我无法在 canvas 区域外单击。 Allow mouse control of three.js scene only when mouse is over canvas

最近有人运行遇到过同样的事情吗？如果是这样，有哪些解决方法？感谢任何帮助。

-

代码设置如下：

// setup scene
// setup camera
// setup renderer
// ..

var trackballControls = new THREE.TrackballControls(camera, renderer.domElement);
trackballControls.rotateSpeed = 3.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;

// ..

// render loop

var clock = new THREE.Clock();

function render() {
  stats.update();
  var delta = clock.getDelta();
  trackballControls.update(delta);

  requestAnimationFrame( render );
  renderer.render( scene, camera );
}

Answer 1

我在 post 的帮助下调试了这个问题：。

显然，如果您在初始化 trackballControls 后附加 renderer.domElement 子对象，它对 renderer.domElement 对象一无所知。如前所述，这对 dat.gui 也做了一些奇怪的事情。

基本上，确保这一行：

document.getElementById("WebGL-output").appendChild(renderer.domElement);

出现在这一行之前：

var trackballControls = new THREE.TrackballControls(camera, renderer.domElement);

Answer 2

确保渲染器 DOM 元素已添加到 html ，然后 它被用作参考。

document.body.appendChild(renderer.domElement);

Three.js & Dat.gui - TrackballControls renderer.domElement 禁用旋转和平移

Three.js & Dat.gui - TrackballControls renderer.domElement disables rotate and pan

three.js

dat.gui