Javascript three.js中dat.gui.js和trackballControl.js之间的冲突

使用three.js时，我发现

dat.gui.js

和

trackballControl.js

之间存在冲突。例如，通过dat.gui更改值后，我无法使用mousemove旋转相机，因为鼠标无法从gui区域移出。为什么以及如何应对

构造函数允许dom元素的第二个参数。
此dom元素是控件的鼠标事件侦听器将添加到的对象。如果不提供此参数，鼠标事件侦听器将添加到

文档中（我认为这是您的问题）

很难给你一个适合你的例子，因为你还没有发布你的代码。

您应该能够将renderer dom元素发送到trackballControls以解决问题。

例如

运行下面的代码段以获得工作示例


var摄影机、场景、渲染器、网格、材质、控件、gui、方向光；
init（）；
render（）；
制作动画（）；
函数init（）{
//渲染器。
renderer=new THREE.WebGLRenderer（）；
//renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//将渲染器添加到页面
document.body.appendChild（renderer.doElement）；
//创建相机。
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
//添加轨迹球控件，发送dom元素以将MouseeEvent侦听器附加到。
控件=新的三个.trackball控件（摄影机、渲染器.doElement）；
控件。addEventListener（'change'，render）；
//创建场景。
场景=新的三个。场景（）；
//创造材料
材质=新的三个。MeshPhongMaterial（）；
//创建立方体并添加到场景中。
var geometry=新的三个.BoxGeometry（200200200）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
//创建环境光并添加到场景中。
var light=新的三个。环境光（0x404040）；//柔和的白光
场景。添加（灯光）；
//创建平行光并添加到场景中。
方向灯=新的三个方向灯（0xffffff）；
directionalLight.position.set（1,1,1）.normalize（）；
场景。添加（方向光）；
//添加用于调整窗口大小的侦听器。
addEventListener（'resize'，onWindowResize，false）；
//添加GUI
var gui=new dat.gui（）；
var lightFolder=gui.addFolder（'Light'）；
lightFolder.add（directionalLight，'intensity'）.onChange（function（）{render（）}）；
lightFolder.open（）；
}
函数animate（）{
请求动画帧（动画）；
控件更新（）；
}
//仅由控件更改或gui更改调用。
函数render（）{
渲染器。渲染（场景、摄影机）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
controls.handleResize（）；
}
正文{
边际：0px；
}

这将是鼠标事件侦听器之间的冲突。关于如何将three.js场景和dat.gui添加到页面以便我们可以帮助您的Post代码您是对的。这是鼠标事件侦听器之间的冲突。因此，我将trackballControl.js替换为OrbitControls.js，并将触摸事件写入OrbitControls.js。如果你有其他好主意，请与我联系。谢谢你！应该不需要重写任何东西，这些控制器类已经使用多年了，非常健壮。您需要将dom元素作为第二个参数发送给TrankBallControls构造函数。看我的答案，你是对的。正如您所说，我添加了dom元素的第二个参数。问题解决了，谢谢！
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
// send dom element to trackballControlls.
controls = new THREE.TrackballControls( camera, renderer.domElement );