Vue.js VueJs应用程序中的ThreeJs黑屏
我一直在学习Three.js的一些基础知识 Vue.JS应用程序 我遵循一个教程和代码是一样的原始自动。 作为初始测试添加了一个立方体几何体，但是我的屏幕画布变黑了，因为我是vuejs新手，所以找不到错误 请参阅下面的一些代码 谢谢大家!Vue.js VueJs应用程序中的ThreeJs黑屏,vue.js,three.js,Vue.js,Three.js,我一直在学习Three.js的一些基础知识 Vue.JS应用程序 我遵循一个教程和代码是一样的原始自动。 作为初始测试添加了一个立方体几何体，但是我的屏幕画布变黑了，因为我是vuejs新手，所以找不到错误 请参阅下面的一些代码 谢谢大家! 从“三”中导入*作为三； 从“three/examples/jsm/controls/OrbitControls”导入{OrbitControls}； 导出默认值{ 名称：“空间”， 数据（）{ 返回{ 场景：空， 摄像机：空， 渲染器：null， 控件：
从“三”中导入*作为三；
从“three/examples/jsm/controls/OrbitControls”导入{OrbitControls}；
导出默认值{
名称：“空间”，
数据（）{
返回{
场景：空，
摄像机：空，
渲染器：null，
控件：null，
iR:null，
};
},
安装的（）{
让那=这；
这个。清醒（）；
addEventListener（“resize”，onWindowResize，false）；
函数onWindowResize（）{
that.camera.aspect=window.innerWidth/window.innerHeight；
那就是.camera.updateProjectMatrix（）；
设置大小（window.innerWidth，window.innerHeight）；
}
onWindowResize（）；
},
方法：{
觉醒{
let container=document.getElementById（“容器”）；
this.scene=新的三个.scene（）；
this.scene.background=新的三种颜色（0x22222）；
this.camera=新的3.perspective相机(
25,
window.clientWidth/window.clientHeight，
1.
100
);
此.摄像机.位置.设置（8,4,0）；
this.iR=new THREE.Group（）；
this.iR=“交互式根目录”；
this.scene.add（this.iR）；
let light0=新的三个环境光（0xfafafa，0.25）；
设light1=新的三点光源（0xfafafa，0.4）；
灯1.位置设置（200、90、40）；
设light2=新的三点光源（0xfafafa，0.4）；
灯2.位置设置（200,90，-40）；
this.scene.add（light0）；
this.scene.add（light1）；
this.scene.add（light2）；
让gridHelper=new THREE.gridHelper(
60,
150,
新三种颜色（0x555555），
新三种颜色（0x333333）
);
this.scene.add（gridHelper）；
//要测试的网格几何体
让geometry=new-THREE.BoxGeometry（1,1,1）；
let material=new THREE.MeshPhongMaterial（{color:0x00ff00}）；
设网格=新的三个网格（几何体、材质）；
this.scene.add（网格）；
this.renderer=new THREE.WebGLRenderer（{antialas:true}）；
this.renderer.setPixelRatio（window.devicePixelRatio）；
this.renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（this.renderer.doElement）；
this.controls=新的轨道控件（this.camera、this.renderer.doElement）；
this.controls.enableddamping=true；
此.controls.dampingFactor=0.25；
this.controls.screenSpacePanning=false；
this.controls.maxDistance=800；
this.controls.update（）；
这个.Update（）；
GetGeoJson（）；
},
更新（）{
requestAnimationFrame（this.Update）；
this.renderer.render（this.scene，this.camera）；
this.controls.update（）；
},
GetGeoJson（）{
获取（“./assets/ufpe.geojson”）。然后（（res）=>{
res.json（）.then（（数据）=>{
控制台日志（数据）；
//本文件包含了建筑物（数据）
});
});
},
},
};