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

Question

我尝试将 dat.gui 与一个非常简单的 Three.js (r73) 场景一起使用，但在将“renderer.domElement”添加到 trackballControls 初始化后遇到旋转和平移不起作用的问题。缩放按预期工作。

如果没有 renderer.domElement，我可以使用旋转、缩放、平移功能，但 dat.gui 界面 slider 在单击时会“锁定”，这很烦人且不起作用。此处描述的问题:Issue while using dat.GUI in a three.js example 。

在这里查看了更多信息，但没有看到很好的分辨率:https://github.com/mrdoob/three.js/issues/828

也发现了这个问题。定义容器元素又名 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

我在这篇文章的帮助下调试了这个问题:Three.js Restrict the mouse movement to Scene only 。

显然，如果您在初始化 trackballControls 后附加 renderer.domElement 子项，则它不知道有关 renderer.domElement 对象的任何信息。如前所述，这也会对 dat.gui 造成一些奇怪的影响。

基本上，请确保这一行:

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

出现在该行之前:

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