Question

我正在尝试将dat.gui与一个非常简单的three.js（r73）场景一起使用，但是在将“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

也发现了这个问题。定义容器元素aka 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 );
}

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

Answer 2

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

document.body.appendChild(renderer.domElement);

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

2 个答案: