3

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

如果没有 renderer.domElement，我可以获得有效的旋转、缩放、平移功能，但 dat.gui 界面滑块在单击时会“锁定”，这很烦人且不起作用。此处描述的问题：在 three.js 示例中使用 dat.GUI 时出现问题。

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

也发现了这个问题。定义容器元素又名 renderer.domElement 不起作用。如果不旋转场景，我无法在画布区域之外单击。 仅当鼠标在画布上时才允许鼠标控制 three.js 场景

最近有没有人遇到同样的事情？如果是这样，有哪些解决方法是可能的？任何帮助表示赞赏。

-

代码设置如下：

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

2 回答 2

4

我在这篇文章的帮助下调试了这个问题：Three.js Restrict the mouse move 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);
于 2015-10-27T02:34:34.967 回答
2

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

document.body.appendChild(renderer.domElement);
于 2015-11-09T12:35:34.647 回答