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

我试图将dat.gui用于一个非常简单的three.js（r73）场景，但在向trackballControls初始化添加“renderer.doElement”后，遇到了旋转和平移不工作的问题。Zoom按预期工作

如果没有renderer.doElement，我可以使用旋转、缩放和平移功能，但是单击时dat.gui界面滑块会“锁定”，这很烦人，而且不起作用。此处描述的问题：

在此处查看了更多信息，但没有看到很好的解决方案：

也发现了这个问题。定义容器元素aka renderer.doElement无效。如果不旋转场景，我无法在画布区域外单击。

最近有人碰到过同样的事情吗？如果是这样，可以采取哪些变通办法？感谢您的帮助

-

代码设置如下所示：

// 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 );
}

---

我在以下帖子的帮助下调试了该问题：

显然，如果在初始化trackballControls后附加renderer.doElement子对象，它对renderer.doElement对象一无所知。如前所述，这对dat.gui也会产生一些奇怪的影响

基本上，确保这一行：

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

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

显示在此行之前：

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

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

---

确保renderer DOM元素在用作引用之前已添加到html

document.body.appendChild(renderer.domElement);