123

src/views/bim/bimHome/components/ThreeView2.vue

@@ -39,6 +39,16 @@
                 <span class="red"></span>大于3年
             </p>
         </div>
+        <!-- <div class="stop_tooltips" v-show="isShowstart" @click="stop">
+            <p>
+                停止
+            </p> 
+        </div>
+        <div class="con_tooltips" v-show="isShowstart" @click="continu">
+            <p>
+                继续
+            </p> 
+        </div> -->
     </div>
 </template>
 <script setup>
@@ -73,7 +83,7 @@ onMounted(() => {
     });
     // document.addEventListener("mousemove", onMouseMove);
 });
-let scene, renderer, camera, controls, clickedObject, model;
+let scene, renderer, camera, controls, clickedObject, model, animal1, animal2;
 
 // 克隆颜色和模型
 let objArr = [];
@@ -91,9 +101,10 @@ let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
 const data = reactive({
     isAddLabel: true,
     isRemoveBottom: true,
-    isShowWall: false //墙体
+    isShowWall: false, //墙体，
+    isShowstart: false
 });
-const { isAddLabel, isRemoveBottom, isShowWall } = toRefs(data);
+const { isAddLabel, isRemoveBottom, isShowWall, isShowstart } = toRefs(data);
 // 建筑树点击
 Bus.on('clickBuild', (isParent) => {
     // Todo
@@ -148,6 +159,7 @@ const init = () => {
     document.getElementById('gltf').appendChild(renderer.domElement);
 
     controls = new OrbitControls(camera, renderer.domElement);
+    controls.minDistance = 15;
     const pmremGenerator = new THREE.PMREMGenerator(renderer);
     scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
     var vector = new THREE.Vector3();
@@ -430,6 +442,7 @@ const toHomeView = () => {
     cleanColor();
     // 隐藏图例
     isShowWall.value = false;
+    isShowstart.value = false;
     // 移除消防图标
     removexf();
 }
@@ -452,6 +465,7 @@ const nearCamera = (floor) => {
 const setLabel = () => {
     if (isAddLabel.value) {
         let obj = scene.getObjectByName('T11');
+        console.log(123, obj)
         addLabel(obj, 'title');
     } else {
         removeLabel();
@@ -610,6 +624,7 @@ const removexf = () => {
 const changeMap = (img) => {
     removeLabel();
     isShowWall.value = true;
+    isShowstart.value = false;
     // 获取墙体
     model.traverse(e => {
         if (['touliao_wall1', 'touliao_wall2', 'touliao_wall3', 'touliao_wall4', 'touliao_wall5', 'touliao_wall6', 'touliao_wall7', 'touliao_wall8'].indexOf(e.name) != -1) {
@@ -642,6 +657,8 @@ const changeMap = (img) => {
 }
 // 巡检
 const check = () => {
+    isShowstart.value = true;
+    isShowWall.value = false;
     removeLabel();
     let yn = 8, duration = 0;
     if (checkindex < checkArr.length ) {  
@@ -659,18 +676,19 @@ const check = () => {
             duration = 10
         }
          // 2，转动镜头
-        gsap.to(controls.target, {
+        animal1 = gsap.to(controls.target, {
             x: nextObj.x,
-            y: nextObj.y + 2,
+            y: nextObj.y,
             z: nextObj.z,
             duration: duration,
             ease: "power1.inOut",
             onComplete: () => {
+                controls.enabled = false;
                 // 3，移动摄像机
-                gsap.to(camera.position, {
-                    x: nextObj.x-0.5,
-                    y: nextObj.y + yn,
-                    z: nextObj.z,
+                animal2 = gsap.to(camera.position, {
+                    x: nextObj.x + 2,
+                    y: nextObj.y + 6,
+                    z: nextObj.z + 4,
                     duration: 10,
                     ease: 'power1.inOut',
                     onComplete: () => { 
@@ -698,7 +716,14 @@ const checkComplete = () => {
     emit('checkComplete', checkArr);
     return;
 }
-
+const stop = () => { 
+    animal1.pause();
+    animal2.pause();
+}
+const continu = () => { 
+    animal1.resume();
+    animal2.resume();
+}
 </script>
 <style lang='scss'>
 #gltf {
@@ -854,6 +879,24 @@ const checkComplete = () => {
         }
     }
 }
+.stop_tooltips, .con_tooltips {
+    position: absolute;
+    bottom: 50px;
+    right: 500px;
+    z-index: 999;
+    display: flex;
+    color: #fff;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    justify-content: space-around;
+    align-items: center;
+    background: #3cbfdf;
+    cursor: pointer;
+}
+.con_tooltips { 
+    right: 560px;
+}
 @keyframes textAnimation {
     0% {
         transform: scale(1);
@@ -873,8 +916,7 @@ const checkComplete = () => {
   color: #141313;
   padding: 15px;
   text-align: center;
-  line-height: 100px;
-  border-radius: 5px;
+  line-height: 80px; 
   border-radius: 50%;
   .text{
     display: inline-block;