Three.js和Dat.gui - TrackballControls渲染器dom元素禁用旋转和平移

Question

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

没有renderer.domElement时，我可以获得旋转、缩放、平移功能，但dat.gui接口滑块在单击时会"锁定"，这只是令人烦恼而不实用。该问题如此描述：Issue while using dat.GUI in a three.js example。

查看了更多信息，但没有看到很好的解决方案：https://github.com/mrdoob/three.js/issues/828 还发现了这个问题。定义容器元素即renderer.domElement无效。我无法在画布区域外部单击而不旋转场景。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 );
}

- rjd

Answer 1

我借助这篇文章解决了问题：Three.js限制鼠标仅在场景中移动。

显然，如果在初始化trackballControls后附加renderer.domElement子元素，则它对renderer.domElement对象一无所知。这也会像之前描述的那样对dat.gui产生奇怪的影响。

基本上，请确保这一行代码：

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

在这一行之前出现：

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

- rjd

Answer 2

在将渲染器DOM元素用作参考之前，确保将其添加到html中。

document.body.appendChild(renderer.domElement);

- Jonas Johansson