diff --git "a/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" new file mode 100644 index 0000000..fd2bfaf --- /dev/null +++ "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" Binary files differ diff --git "a/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" new file mode 100644 index 0000000..fd2bfaf --- /dev/null +++ "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" Binary files differ diff --git a/src/assets/images/Sponge_screen/ZuoYou1.png b/src/assets/images/Sponge_screen/ZuoYou1.png new file mode 100644 index 0000000..d0e21f6 --- /dev/null +++ b/src/assets/images/Sponge_screen/ZuoYou1.png Binary files differ diff --git "a/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" new file mode 100644 index 0000000..fd2bfaf --- /dev/null +++ "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" Binary files differ diff --git a/src/assets/images/Sponge_screen/ZuoYou1.png b/src/assets/images/Sponge_screen/ZuoYou1.png new file mode 100644 index 0000000..d0e21f6 --- /dev/null +++ b/src/assets/images/Sponge_screen/ZuoYou1.png Binary files differ diff --git a/src/assets/images/Sponge_screen/ZuoYou2.png b/src/assets/images/Sponge_screen/ZuoYou2.png new file mode 100644 index 0000000..432e159 --- /dev/null +++ b/src/assets/images/Sponge_screen/ZuoYou2.png Binary files differ diff --git "a/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" new file mode 100644 index 0000000..fd2bfaf --- /dev/null +++ "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" Binary files differ diff --git a/src/assets/images/Sponge_screen/ZuoYou1.png b/src/assets/images/Sponge_screen/ZuoYou1.png new file mode 100644 index 0000000..d0e21f6 --- /dev/null +++ b/src/assets/images/Sponge_screen/ZuoYou1.png Binary files differ diff --git a/src/assets/images/Sponge_screen/ZuoYou2.png b/src/assets/images/Sponge_screen/ZuoYou2.png new file mode 100644 index 0000000..432e159 --- /dev/null +++ b/src/assets/images/Sponge_screen/ZuoYou2.png Binary files differ diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue index 2cc4b8b..3b45c51 100644 --- a/src/views/oneMap/BIM/WangJiaPIng.vue +++ b/src/views/oneMap/BIM/WangJiaPIng.vue @@ -26,6 +26,7 @@ const Controls = ref(null); const granaryArr = ref([]); const LabelRenderer = ref(null); +const animationFrameId = ref(null); let Twater = null; const labelData = ref([ { @@ -260,17 +261,23 @@ * 创建并添加环境光到场景中，以模拟全局照明效果 */ const initLight = () => { - // let ambientLight = new THREE.AmbientLight(0xffffff, 0.1); // 创建环境光 - // Scene.add(ambientLight); - // // 设置场景的背景颜色，即天空颜色 - // Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色 - // // 设置天空的雾气颜色和雾气近距离 + // // // 设置场景的背景颜色，即天空颜色 + // // Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色 + // // // 设置天空的雾气颜色和雾气近距离 Scene.fog = new THREE.Fog(0xffffff, 50, 200); // 距离10开始，到200结束 - // // 创建平行光源 - // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1); - // directionalLight.position.set(-100, 100, 100); - // // 将光源添加到场景 + // // // 创建平行光源 + // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // Scene.add(directionalLight); + // // 创建环境光 + // const ambientLight = new THREE.AmbientLight("#fff", 0.8); + // Scene.add(ambientLight); + // // // 创建平行光辅助线 + // // const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.5); + // // Scene.add(directionalLightHelper); + // // 创建点光源 + // const PointLight = new THREE.PointLight(0x1784f9, 1, 300); + // PointLight.position.set(100, -100, 10); + // Scene.add(PointLight); }; /** @@ -289,16 +296,17 @@ Scene.background = envMap; pmremGenerator.dispose(); }); - new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) { - Scene.background = texture; - }); + // new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) { + // Scene.background = texture; + // }); }; /** * 渲染函数，用于不断更新和渲染场景 */ + const Render = () => { - requestAnimationFrame(Render); + animationFrameId.value = requestAnimationFrame(Render); Controls.value.update(); // 轨道控制器的更新 Renderer.value.clear(); // 清除画布 Renderer.value.render(Scene, Camera.value); @@ -353,6 +361,11 @@ Renderer.value.dispose(); Renderer.value.content = null; clearInterval(timer.value); + + // 清理渲染器和相机 + Camera.value = null; + + cancelAnimationFrame(animationFrameId.value); }); diff --git "a/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" new file mode 100644 index 0000000..fd2bfaf --- /dev/null +++ "b/public/Gltf/Skey_1K\050\345\244\207\344\273\2752\051.hdr" Binary files differ diff --git a/src/assets/images/Sponge_screen/ZuoYou1.png b/src/assets/images/Sponge_screen/ZuoYou1.png new file mode 100644 index 0000000..d0e21f6 --- /dev/null +++ b/src/assets/images/Sponge_screen/ZuoYou1.png Binary files differ diff --git a/src/assets/images/Sponge_screen/ZuoYou2.png b/src/assets/images/Sponge_screen/ZuoYou2.png new file mode 100644 index 0000000..432e159 --- /dev/null +++ b/src/assets/images/Sponge_screen/ZuoYou2.png Binary files differ diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue index 2cc4b8b..3b45c51 100644 --- a/src/views/oneMap/BIM/WangJiaPIng.vue +++ b/src/views/oneMap/BIM/WangJiaPIng.vue @@ -26,6 +26,7 @@ const Controls = ref(null); const granaryArr = ref([]); const LabelRenderer = ref(null); +const animationFrameId = ref(null); let Twater = null; const labelData = ref([ { @@ -260,17 +261,23 @@ * 创建并添加环境光到场景中，以模拟全局照明效果 */ const initLight = () => { - // let ambientLight = new THREE.AmbientLight(0xffffff, 0.1); // 创建环境光 - // Scene.add(ambientLight); - // // 设置场景的背景颜色，即天空颜色 - // Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色 - // // 设置天空的雾气颜色和雾气近距离 + // // // 设置场景的背景颜色，即天空颜色 + // // Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色 + // // // 设置天空的雾气颜色和雾气近距离 Scene.fog = new THREE.Fog(0xffffff, 50, 200); // 距离10开始，到200结束 - // // 创建平行光源 - // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1); - // directionalLight.position.set(-100, 100, 100); - // // 将光源添加到场景 + // // // 创建平行光源 + // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // Scene.add(directionalLight); + // // 创建环境光 + // const ambientLight = new THREE.AmbientLight("#fff", 0.8); + // Scene.add(ambientLight); + // // // 创建平行光辅助线 + // // const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.5); + // // Scene.add(directionalLightHelper); + // // 创建点光源 + // const PointLight = new THREE.PointLight(0x1784f9, 1, 300); + // PointLight.position.set(100, -100, 10); + // Scene.add(PointLight); }; /** @@ -289,16 +296,17 @@ Scene.background = envMap; pmremGenerator.dispose(); }); - new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) { - Scene.background = texture; - }); + // new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) { + // Scene.background = texture; + // }); }; /** * 渲染函数，用于不断更新和渲染场景 */ + const Render = () => { - requestAnimationFrame(Render); + animationFrameId.value = requestAnimationFrame(Render); Controls.value.update(); // 轨道控制器的更新 Renderer.value.clear(); // 清除画布 Renderer.value.render(Scene, Camera.value); @@ -353,6 +361,11 @@ Renderer.value.dispose(); Renderer.value.content = null; clearInterval(timer.value); + + // 清理渲染器和相机 + Camera.value = null; + + cancelAnimationFrame(animationFrameId.value); }); diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue index ac94976..4ec8be4 100644 --- a/src/views/oneMap/index.vue +++ b/src/views/oneMap/index.vue @@ -8,7 +8,7 @@ :class="[ 'oneMapHeader', 'animate__animated', - showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown', + showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown', ]" > @@ -43,8 +43,16 @@ - - + + + + + { + showPanel.value = false; // 改变菜单选中索引 AllData.AC_MenuIndex = item.id; // 二级也选中一级菜单默认展示的那个 @@ -748,6 +761,24 @@ top: 100px; cursor: pointer; } + #ShowComVs { + position: absolute; + left: 0px; + top: 300px; + width: 40px; + height: 40px; + // background: #00cee0; + cursor: pointer; + } + + .ShowComVsTrue { + transform: translateX(10px); + transition: all 1s ease; + } + .ShowComVsFalse { + transform: translateX(460px); + transition: all 0.8s ease; + } } #BottomMenuBox { position: absolute; @@ -888,17 +919,6 @@ transform: translateY(80px); opacity: 0; } - -// .slide-fade2-leave-active, -// .slide-fade2-enter-active { -// transition: all 0.1s ease-out; -// } - -// .slide-fade2-enter-from, -// .slide-fade2-leave-to { -// transform: translateY(80px); -// opacity: 0; -// }