Javascript 为什么控件不能在3D渲染文件上使用three.js？

我正在构建一个应用程序，我希望在Adobe Dimension中构建一个3D模型，并将其导出为

.glb

文件，供网站用户移动。该应用程序是在Laravel中构建的，我的问题是，在我将控件添加到该应用程序中之前，渲染是有效的

在

燕子谷登陆.blade.php

中呈现模型的页面，脚本部分如下所示：

{{--Content--}
变量渲染器，
场景
摄像机，
myCanvas=document.getElementById（'myCanvas'）；
//渲染器
renderer=new THREE.WebGLRenderer({
画布：我的画布，
反别名：对
});
renderer.setClearColor（0xffffff）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//摄像机
摄像头=新的三个透视摄像头（2，window.innerWidth/window.innerHeight，11000）；
//场面
场景=新的三个。场景（）；
//灯光
var灯光=新的三个环境灯光（0xffffff，0.5）；
场景。添加（灯光）；
var light2=新的三点光源（0xffffff，0.5）；
场景。添加（light2）；
var loader=new THREE.GLTFLoader（）；
load（{asset（'img/3D/snownbarnpromo.glb'）}}，handle_load）；
var网格；
函数句柄加载（gltf）{
控制台日志（gltf）；
mesh=gltf.scene；
console.log（mesh.children[0]）；
mesh.children[0].material=new THREE.MeshLambertMaterial（）；
场景。添加（网格）；
网格位置z=-10；
}
//渲染循环
制作动画（）；
var-delta=0；
var prevTime=Date.now（）；
函数render（）{
δ+=0.1；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
函数animate（）{
请求动画帧（渲染）；
render（）；
}

这将加载以下页面：

该三维模型不会旋转或向内移动，但会显示。但是，当我添加控件时，屏幕变为空白。这是包含以下控件的

：

var场景、渲染器、摄影机；
var立方；
风险值控制；
var myCanvas=document.getElementById（'myCanvas'）；
init（）；
制作动画（）；
函数init（）{
//渲染器
renderer=new THREE.WebGLRenderer({
画布：我的画布，
反别名：对
});
renderer.setClearColor（0xffffff）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//场面
场景=新的三个。场景（）；
//灯光
var灯光=新的三个环境灯光（0xffffff，0.5）；
场景。添加（灯光）；
var light2=新的三点光源（0xffffff，0.5）；
场景。添加（light2）；
//摄像机
摄像头=新的三个透视摄像头（2，window.innerWidth/window.innerHeight，11000）；
摄像机位置y=160；
摄像机位置z=400；
摄像机.注视（新的三矢量3（0,0,0））；
//控制
控件=新的3.0个控件（摄影机、渲染器.doElement）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableDamping=true；
控制。阻尼系数=0.25；
controls.enableZoom=true；
controls.autoRotate=true；
//三维渲染
var loader=new THREE.GLTFLoader（）；
load（{asset（'img/3D/snownbarnpromo.glb'）}}，handle_load）；
var网格；
函数句柄加载（gltf）{
控制台日志（gltf）；
mesh=gltf.scene；
console.log（mesh.children[0]）；
mesh.children[0].material=new THREE.MeshLambertMaterial（）；
场景。添加（网格）；
网格位置z=-10；
}
}
函数animate（）{
控件更新（）；
请求动画帧（动画）；
renderer.render（场景、摄影机）；
}

有导入其他文件的

标记：

这是更新的

标记的结果，因为您可以看到屏幕没有变黑，也没有呈现任何内容：

---

如果可能的话，您可以用虚拟数据主持演示吗？将更容易调试…只是前端部分…您是否收到任何控制台错误？你为什么要声明两个相同的

OrbitControls

，一个接一个？@Marquizzo这是我复制粘贴时的一个错误-我已经更新了它@Marquizzo是的，我收到以下控制台错误：[error]TypeError:undefined不是一个对象（评估'THREE.TOUCH.ROTATE'）（匿名函数）（OrbitControls.js:75）init（localhost:171）全局代码（localhost:140）请将错误添加到您的问题中，以便更好地格式化（或将其添加为另一个屏幕截图）。如果可能的话，还包括堆栈跟踪（它是错误下方显示的内容）。