三.js &Dat.gui - TrackballControls renderer.domElement 禁用旋转和平移 [英] Three.js & Dat.gui - TrackballControls renderer.domElement disables rotate and pan

问题描述

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

I am trying to use dat.gui with a very simple three.js (r73) scene but am running into an issue with rotate and pan not working after adding "renderer.domElement" to the trackballControls initialization. Zoom works as expected.

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

Without renderer.domElement, I get a working rotate, zoom, pan functionality but the dat.gui interface sliders "latch" when clicked, which is just annoying and not functional. The issue as described here: Issue while using dat.GUI in a three.js example.

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

Looked over more info here but didn't see a great resolution: https://github.com/mrdoob/three.js/issues/828

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

Also found this issue. Defining the container element aka renderer.domElement doesn't work. I am unable to click within outside of the canvas area without the scene rotating. Allow mouse control of three.js scene only when mouse is over canvas

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

Has anyone run into the same thing recently? If so, what workarounds are possible? Any help is appreciated.

-

代码设置如下:

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

推荐答案

我在这篇文章的帮助下调试了这个问题:Three.js 将鼠标移动限制为仅场景.

I debugged the issue with the help of this post: Three.js Restrict the mouse movement to Scene only.

显然，如果您在初始化 trackballControls 后附加 renderer.domElement 子项，它对 renderer.domElement 对象一无所知.如前所述，这也对 dat.gui 做了一些奇怪的事情.

Apparently, if you append the renderer.domElement child after initializing the trackballControls, it doesn't know anything about the renderer.domElement object. This also does something strange to dat.gui as described previously.

基本上，确保这一行:

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

出现在这一行之前:

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

这篇关于三.js &Dat.gui - TrackballControls renderer.domElement 禁用旋转和平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！