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

本文是小编为大家收集整理的关于Three.js & Dat.gui-TrackballControls renderer.domElement禁止旋转和平移。的处理方法,想解了Three.js & Dat.gui-TrackballControls renderer.domElement禁止旋转和平移。的问题怎么解决?Three.js & Dat.gui-TrackballControls renderer.domElement禁止旋转和平移。问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

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

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

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

也发现了这个问题.定义容器元素又名 renderer.domElement 不起作用.如果不旋转场景,我无法在画布区域之外单击.允许鼠标控制三个.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 );
}

推荐答案

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

显然,如果您在初始化 trackballControls 之后附加 renderer.domElement 子项,则它不知道有关 renderer.domElement 对象的任何信息.如前所述,这也会对 dat.gui 造成一些奇怪的影响.

基本上,确保这一行:

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

出现在这一行之前:

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

本文地址:https://www.itbaoku.cn/post/1793933.html