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

Posted 2023-05-07

【中文标题】Three.js & Dat.gui - TrackballControls renderer.domElement 禁用旋转和平移

【英文标题】：Three.js & Dat.gui - TrackballControls renderer.domElement disables rotate and pan

【发布时间】：2015-10-25 17:23:55

【问题描述】：

我正在尝试将 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

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

【参考方案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);

【参考方案2】：

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

document.body.appendChild(renderer.domElement);