修改提升机动画

4 months ago · 4873e7b5eb
parent 31f2033c97
commit 4873e7b5eb
2 changed files with 83 additions and 137 deletions
--- a/hw-ui/src/views/board/model/animation.js
+++ b/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 {
-      if (!model) {
-        reject()
+    tishengjiLocation.floor = floor
+    if (!model || tishengjiLocation.y === newLocation) {
+      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)) {
-          model.position.y = newLocation
-          tishengjiLocation.y = newLocation
+        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.y += distance / (time / 16)
-          tishengjiLocation.y = model.position.y
+          model.position.x += distance / (time / 16)
+          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) {
-      reject()
-    }
-    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()
+    tuopanLocation.floor = floor
+    if (!model || tuopanLocation.y === newLocation) {
+      resolve()
    }
-    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
 }
--- a/hw-ui/src/views/board/model/index.vue
+++ b/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) => {
-  if (funs.length > 0) {
-    await funs[0]()
-    funs.shift()
-    return animation(funs)
-  }
-}
-
-const tishengjiToFloor = (floor) => {
-  return tishengjiAnimation(keyidongModel, tishengjiLocation.y, storeyHeight[floor], 2000)
-}
-const tuopanReset = async() => {
-  await tuopanXAnimation(tuopanModel, tuopanLocation.x, 0, 2000)
-  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 animation = async() => {
+  try {
+    if (animationLine.length > 0) {
+      await animationLine[0]()
+      animationLine.shift()
+      if (animationLine.length > 0) {
+        animation(animationLine)
+      } else {
+        isAnimation = false
+      }
+    }
+  } catch (e) {
+    console.log(e)
  }
 }
-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,
-      tuopanInishengji: true
+      floor: 0
    }
  },
  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)
-      tishengjiLocation.floor = e
-      // tishengjiLocation.y = storeyHeight[e]
-      if (this.tuopanInishengji) {
-        // tuopanToFloor(e)
-        tuopanLocation.floor = e
-        // tuopanLocation.y = 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)
-      }
+      animationLine.push(() => {
+        console.log(321323)
+        console.log(tuopanInishengji)
+        if (tuopanInishengji) {
+          return Promise.all([tishengjiAnimation(keyidongModel, e, storeyHeight[e]), tuopanYAnimation(tuopanModel, e, storeyHeight[e])])
+        } else {
+          animationLine.push(() => tishengjiAnimation(keyidongModel, e, storeyHeight[e]))
+        }
+      })
    },
    tuopanReset() {
-      if (tishengjiLocation.floor === tuopanLocation.floor) {
-        tuopanReset()
-        tuopanLocation.x = 0
-        this.tuopanInishengji = true
-      }
+      animationLine.push(() => tuopanXAnimation(tuopanModel, 0))
    },
    tuopanOut() {
-      tuopanOut(this.floor)
-      tuopanLocation.x = storeyWidth[this.floor]
-      this.tuopanInishengji = false
+      animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[tuopanLocation.floor]))
    },
    removetuopan() {
      scene.remove(tuopanModel)