Javascript 轨迹球控件和gui可以'；我们不能一起工作

当我点击它们时，gui一起改变，我看到了其他答案，但不知道应该将侦听器放在哪里，我尝试将侦听器放在render（）中，但仍然没有，因此如何修复代码？这与我的毕业有关

这是我的密码：

地图绘制
函数init（）{
变量控制=新数组（多维数据集编号）；
控制台日志（控制）；
var cubes=新数组（多维数据集编号）；
var guicube=新数组（多维数据集编号）；
var cube_number=4；//更改此单词，您可以更改多维数据集的数量
var stats=initStats（）
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（70，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置x=10；
摄像机位置y=10；
摄像机位置z=30；
摄像机。注视（场景。位置）；
var trackballControls=新的三个。trackballControls（摄像头）//配置控制器
var clock=新的三个时钟（）；
Trackball Controls.rotateSpeed=1.0；
trackballControls.zoomSpeed=1.0；
trackballControls.panSpeed=1.0；
trackballControls.DoElement=document.querySelector（“#camera”）
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（新的三种颜色（0x000000））//背景颜色设置
renderer.setSize（window.innerWidth、window.innerHeight）；
变量轴=新的三个.AxisHelper（60）；
场景。添加（轴）；
对于（变量i=0；i

您在错误的位置声明了

轨迹球控件的DomeElement

。它必须作为构造函数的第二个参数传递。此外，请确保传递的domeElement与

渲染器的domeElement相同，这样您就不会遇到z索引问题

错误

var trackballControls = new THREE.TrackballControls(camera);
trackballControls.domElement = document.querySelector('#camera'); // too late to declare here
...
document.getElementById("airport").appendChild(renderer.domElement); // Will lead to stacking issues


正确：

var trackballControls = new THREE.TrackballControls(camera, document.querySelector('#airport'));
...
document.getElementById("airport").appendChild(renderer.domElement); // Same element as trackball

另外

确保您正在调用
stats.update（）
在
for（）
循环之外，否则它将每帧运行4次，导致错误的240 FPS



地图绘制
函数init（）{
变量控制=新数组（多维数据集编号）；
控制台日志（控制）；
var cubes=新数组（多维数据集编号）；
var guicube=新数组（多维数据集编号）；
var cube_number=4；//更改此单词，您可以更改多维数据集的数量
var stats=initStats（）
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（70，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置x=10；
摄像机位置y=10；
摄像机位置z=30；
摄像机。注视（场景。位置）；
var trackballControls=new THREE.trackballControls（摄影机、文档、查询选择器（“#机场”）；//传递#airpo