修改提升机动画

hw-ui/src/views/board/model/animation.js

@@ -1,3 +1,4 @@
+let tuopanInishengji = true
 let storeyHeight = {
   1: 0,
   2: 261.9,
@@ -27,70 +28,70 @@ let tuopanLocation = {
   z: 0
 }
 
-const tishengjiAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000) => {
+const tishengjiAnimation = (model, floor, newLocation = 0, time = 2000) => {
 
   return new Promise((resolve, reject) => {
-    try {
+    tishengjiLocation.floor = floor
-      if (!model) {
+    if (!model || tishengjiLocation.y === newLocation) {
-        reject()
+      resolve()
+    }
+    let distance = newLocation - tishengjiLocation.y
+    let time1 = setInterval(() => {
+      if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) {
+        model.position.y = newLocation
+        tishengjiLocation.y = newLocation
+        resolve()
+        clearInterval(time1)
+        clearTimeout(time3)
+      } else {
+        model.position.y += distance / (time / 16)
+        tishengjiLocation.y = model.position.y
       }
-      let distance = newLocation - oddLocation
+    }, 16)
+    let time3 = setTimeout(() => {
+      resolve()
+      clearInterval(time1)
+      clearTimeout(time3)
+    }, time + 1000)
+
+  })
+}
+
+const tuopanXAnimation = (model, newLocation = 0, time = 2000) => {
+  return new Promise((resolve, reject) => {
+    if (!model || newLocation === tuopanLocation.x || tishengjiLocation.floor !== tuopanLocation.floor) {
+      resolve()
+    }else{
+      tuopanInishengji = newLocation === 0;
+      let distance = newLocation - tuopanLocation.x
       let time1 = setInterval(() => {
-        if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) {
+        if ((distance > 0 && model.position.x >= newLocation) || (distance < 0 && model.position.x <= newLocation)) {
-          model.position.y = newLocation
+          model.position.x = newLocation
-          tishengjiLocation.y = newLocation
+          tuopanLocation.x = newLocation
           resolve()
           clearInterval(time1)
           clearTimeout(time3)
         } else {
-          model.position.y += distance / (time / 16)
+          model.position.x += distance / (time / 16)
-          tishengjiLocation.y = model.position.y
+          tuopanLocation.x = model.position.x
         }
       }, 16)
       let time3 = setTimeout(() => {
-        reject()
+        resolve(0)
         clearInterval(time1)
         clearTimeout(time3)
       }, time + 1000)
-
-    }catch (e) {
-      console.log(e)
     }
   })
 }
 
-const tuopanXAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000) => {
+const tuopanYAnimation = (model, floor, newLocation = 0, time = 2000) => {
   return new Promise((resolve, reject) => {
-    if (!model) {
+    tuopanLocation.floor = floor
-      reject()
+    if (!model || tuopanLocation.y === newLocation) {
-    }
+      resolve()
-    let distance = newLocation - oddLocation
-    let time1 = setInterval(() => {
-      if ((distance > 0 && model.position.x >= newLocation) || (distance < 0 && model.position.x <= newLocation)) {
-        model.position.x = newLocation
-        tuopanLocation.x = newLocation
-        resolve()
-        clearInterval(time1)
-        clearTimeout(time3)
-      } else {
-        model.position.x += distance / (time / 16)
-        tuopanLocation.x = model.position.x
-      }
-    }, 16)
-    let time3 = setTimeout(() => {
-      reject()
-      clearInterval(time1)
-      clearTimeout(time3)
-    }, time + 1000)
-  })
-}
-
-const tuopanYAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000) => {
-  return new Promise((resolve, reject) => {
-    if (!model) {
-      reject()
     }
-    let distance = newLocation - oddLocation
+    let distance = newLocation - tuopanLocation.y
     let time1 = setInterval(() => {
       if ((distance > 0 && model.position.y >= newLocation) || (distance < 0 && model.position.y <= newLocation)) {
         model.position.y = newLocation
@@ -104,50 +105,19 @@ const tuopanYAnimation = (model, oddLocation = 0, newLocation = 0, time = 2000)
       }
     }, 16)
     let time3 = setTimeout(() => {
-      reject()
-      clearInterval(time1)
-      clearTimeout(time3)
-    }, time + 1000)
-  })
-}
-
-const tuopanAnimation = (model, oddLocation = {}, newLocation = {}, time = 2000) => {
-  return new Promise((resolve, reject) => {
-    if (!model) {
-      reject()
-    }
-    let X = ((newLocation.x === null || newLocation.x === undefined) ? oddLocation.x : newLocation.x) - oddLocation.x
-    let Y = ((newLocation.y === null || newLocation.y === undefined) ? oddLocation.y : newLocation.y) - oddLocation.y
-    let time1 = setInterval(() => {
-      model.position.x += X / (time / 16)
-      model.position.y += Y / (time / 16)
-      tuopanLocation.x = model.position.x
-      tuopanLocation.y = model.position.y
-    }, 16)
-    let time2 = setTimeout(() => {
-      model.position.x = ((newLocation.x === null || newLocation.x === undefined) ? oddLocation.x : newLocation.x)
-      model.position.y = ((newLocation.y === null || newLocation.y === undefined) ? oddLocation.y : newLocation.y)
       resolve()
       clearInterval(time1)
-      clearTimeout(time2)
-      clearTimeout(time3)
-    }, time)
-    let time3 = setTimeout(() => {
-      reject()
-      clearInterval(time1)
-      clearTimeout(time2)
       clearTimeout(time3)
     }, time + 1000)
   })
 }
 
 export {
+  tuopanInishengji,
   storeyHeight,
   storeyWidth,
-  tishengjiLocation,
-  tuopanLocation,
   tishengjiAnimation,
   tuopanXAnimation,
   tuopanYAnimation,
-  tuopanAnimation
+  tuopanLocation
 }

hw-ui/src/views/board/model/index.vue

@@ -6,7 +6,7 @@
       <Demo/>
     </div>
     <div style="position:absolute;top: 0;left: 0;">
-      <el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>
+      <!--      <el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>-->
       <el-select v-model="floor" placeholder="去几楼" @change="toFloor">
         <el-option
           label="1楼"
@@ -53,47 +53,36 @@ import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRe
 import Demo from '@/components/model/demo.vue'
 
 import {
+  tuopanInishengji,
   storeyHeight,
   storeyWidth,
-  tishengjiLocation,
-  tuopanLocation,
   tishengjiAnimation,
   tuopanXAnimation,
   tuopanYAnimation,
-  tuopanAnimation
+  tuopanLocation
 } from './animation'
 
 let keyidongModel = null
 let tuopanModel = null
 
+let isAnimation = false
 let animationLine = []
 
-const animation = async(funs) => {
+const animation = async() => {
-  if (funs.length > 0) {
+  try {
-    await funs[0]()
+    if (animationLine.length > 0) {
-    funs.shift()
+      await animationLine[0]()
-    return animation(funs)
+      animationLine.shift()
-  }
+      if (animationLine.length > 0) {
-}
+        animation(animationLine)
-
+      } else {
-const tishengjiToFloor = (floor) => {
+        isAnimation = false
-  return tishengjiAnimation(keyidongModel, tishengjiLocation.y, storeyHeight[floor], 2000)
+      }
-}
+    }
-const tuopanReset = async() => {
+  } catch (e) {
-  await tuopanXAnimation(tuopanModel, tuopanLocation.x, 0, 2000)
+    console.log(e)
-  console.log(321321312)
-}
-const tuopanToFloor = (floor) => {
-  return tuopanYAnimation(tuopanModel, tuopanLocation.y, storeyHeight[floor], 2000)
-  return () => {
-    tuopanXAnimation(tuopanModel, tuopanLocation.x, 0, 20)
-    tuopanYAnimation(tuopanModel, tuopanLocation.y, storeyHeight[floor], 2000)
   }
 }
-const tuopanOut = async(floor) => {
-  await tuopanXAnimation(tuopanModel, tuopanLocation.x, storeyWidth[floor], 2000)
-  console.log(321321312)
-}
 
 const scene = new THREE.Scene()
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
@@ -104,8 +93,7 @@ export default {
   data() {
     return {
       num: -60,
-      floor: 0,
+      floor: 0
-      tuopanInishengji: true
     }
   },
   mounted() {
@@ -167,14 +155,13 @@ export default {
               xhr => {
                 if ((xhr.loaded / xhr.total * 100) === 100) {
                   a += 1
-                  console.log(a)
                 }
               }
             )
           })
       })
     }
-    loadF(['AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'changfang002', 'changfang003', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan'])
+    loadF(['tishengji', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'changfang002', 'changfang003', 'quanzidongchaibaojizhaungpeixian003', 'tishengji_keyidongbufen', 'tishengji_tuopan'])
 
     const labelRenderer = new CSS2DRenderer()
     labelRenderer.setSize(window.innerWidth, window.innerHeight)
@@ -222,7 +209,6 @@ export default {
       // 如果有交点
       if (intersects.length > 0) {
         let obj = intersects[0]
-        console.log(obj)
         new TWEEN.Tween(camera.position).to(new THREE.Vector3((intersects[0].point.x + 0), (intersects[0].point.y + 500), (intersects[0].point.z - 500)), 500).onUpdate(() => {
           camera.updateProjectionMatrix()
         }).start()
@@ -237,11 +223,15 @@ export default {
 
 // 渲染循环
     function animate() {
+      if (animationLine.length > 0 && isAnimation === false) {
+        console.log('动画')
+        isAnimation = true
+        animation(animationLine)
+      }
       requestAnimationFrame(animate)
       TWEEN.update()
       if (keyidongModel) {
         // keyidongModel.position.y += 0.1;
-        // console.log(  keyidongModel)
       }
       if (tuopanModel) {
         // tuopanModel.position.y += 0.1;
@@ -251,7 +241,6 @@ export default {
     }
 
     setInterval(() => {
-      // console.log(camera)
     }, 1000 * 10)
 
     animate()
@@ -259,37 +248,24 @@ export default {
   },
   methods: {
     handleChange() {
-      tuopanModel.position.x = this.num
+      // tuopanModel.position.x = this.num
-
     },
     toFloor(e) {
-      // tishengjiToFloor(e)
+      animationLine.push(() => {
-      tishengjiLocation.floor = e
+        console.log(321323)
-      // tishengjiLocation.y = storeyHeight[e]
+        console.log(tuopanInishengji)
-      if (this.tuopanInishengji) {
+        if (tuopanInishengji) {
-        // tuopanToFloor(e)
+          return Promise.all([tishengjiAnimation(keyidongModel, e, storeyHeight[e]), tuopanYAnimation(tuopanModel, e, storeyHeight[e])])
-        tuopanLocation.floor = e
+        } else {
-        // tuopanLocation.y = storeyHeight[e]
+          animationLine.push(() => tishengjiAnimation(keyidongModel, e, storeyHeight[e]))
-        animationLine.push(() => Promise.all([tishengjiToFloor(e), tuopanToFloor(e)]))
+        }
-      } else {
+      })
-        animationLine.push(() => Promise.all([tishengjiToFloor(e)]))
-      }
-      if (animationLine.length === 1) {
-        console.log(animationLine[0])
-        animation(animationLine)
-      }
     },
     tuopanReset() {
-      if (tishengjiLocation.floor === tuopanLocation.floor) {
+      animationLine.push(() => tuopanXAnimation(tuopanModel, 0))
-        tuopanReset()
-        tuopanLocation.x = 0
-        this.tuopanInishengji = true
-      }
     },
     tuopanOut() {
-      tuopanOut(this.floor)
+      animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[tuopanLocation.floor]))
-      tuopanLocation.x = storeyWidth[this.floor]
-      this.tuopanInishengji = false
     },
     removetuopan() {
       scene.remove(tuopanModel)