diff --git a/src/views/sponeScreen/projectHM/gongchenkanbani_comp/modalSJ.vue b/src/views/sponeScreen/projectHM/gongchenkanbani_comp/modalSJ.vue index 760af2f..bdbcf21 100644 --- a/src/views/sponeScreen/projectHM/gongchenkanbani_comp/modalSJ.vue +++ b/src/views/sponeScreen/projectHM/gongchenkanbani_comp/modalSJ.vue @@ -23,14 +23,14 @@ imgHeight: 560, //渲染高度px }); // 初始化模型 -const Scene = new THREE.Scene(); -const Camera = new THREE.PerspectiveCamera(30, AllData.value.imgWidth / AllData.value.imgHeight, 0.1, 5000); +const SceneModal = new THREE.Scene(); +const CameraModal = new THREE.PerspectiveCamera(30, AllData.value.imgWidth / AllData.value.imgHeight, 0.1, 5000); const Renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, //开启alpha }); // 控制器 -const Controls = new OrbitControls(Camera, Renderer.domElement); +const Controls = new OrbitControls(CameraModal, Renderer.domElement); //gltfLoader const Gltfloader = new GLTFLoader(); // 注意:此处为threejs的DOM,需要将threejs的场景渲染进去 @@ -49,7 +49,7 @@ }; // 声明一个方法传入参数可以在不同的地方调用相机 const cameraReset = (position, lookAt, time = 1) => { - gsap.to(Camera.position, { + gsap.to(CameraModal.position, { x: position.x, y: position.y, z: position.z, @@ -59,14 +59,14 @@ // 这是相机运动完成的回调,可以执行其他的方法. // } }); - gsap.to(Camera.lookAt, { + gsap.to(CameraModal.lookAt, { x: lookAt.x, y: lookAt.y, z: lookAt.z, duration: time, ease: 'power4.out', }); - gsap.to(Camera.target, { + gsap.to(CameraModal.target, { x: lookAt.x, y: lookAt.y, z: lookAt.z, @@ -74,7 +74,6 @@ ease: 'power4.out', }); }; -// Scene.add(skyBox); const initThreeScene = () => { // 使动画循环使用时阻尼或自转 意思是否有惯性 @@ -106,8 +105,8 @@ }; // 设置页面自适应 const onWindowResize = () => { - Camera.aspect = AllData.value.imgWidth / AllData.value.imgHeight; - Camera.updateProjectionMatrix(); + CameraModal.aspect = AllData.value.imgWidth / AllData.value.imgHeight; + CameraModal.updateProjectionMatrix(); Renderer.setSize(AllData.value.imgWidth, AllData.value.imgHeight); }; window.addEventListener('resize', onWindowResize, false); @@ -119,7 +118,7 @@ requestAnimationFrame(Render); Controls.update(); // 轨道控制器的更新 Renderer.clear(); // 清除画布 - Renderer.render(Scene, Camera); + Renderer.render(SceneModal, CameraModal); }; let event = {}; @@ -152,15 +151,15 @@ var skyBox = new THREE.Mesh(new THREE.SphereGeometry(600, 600, 600), material); skyBox.geometry.scale(1, 1, -1); -Scene.add(skyBox); +SceneModal.add(skyBox); onMounted(() => { initThreeScene(); Render(); }); onBeforeUnmount(() => { - Scene.remove(skyBox); //删除组 - Scene = null; + SceneModal.remove(skyBox); //删除组 + SceneModal = null; });