修改AGV动画

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

@@ -1,27 +1,77 @@
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import * as THREE from 'three'
-import { camera, renderer, scene, tishengjiLocation } from '@/views/board/model/setThree'
+import { camera, labelRenderer, renderer, scene } from '@/views/board/model/setThree'
-
+import * as TWEEN from '@tweenjs/tween.js'
-let floor3AGVGroup
+
-let floor3AGV
+let timeOrSpeed = true
-let floor3AGVData = {
+
-  x: 0,
+let isAGVAnimation = false
-  y: 0,
+let AGVanimationLine = []
-  rotate: 0
+
+const AGVanimation = async() => {
+  try {
+    if (AGVanimationLine.length > 0) {
+      await AGVanimationLine[0]()
+      AGVanimationLine.shift()
+      if (AGVanimationLine.length > 0) {
+        AGVanimation(AGVanimationLine)
+      } else {
+        isAGVAnimation = false
+      }
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+function AGVanimate() {
+  if (AGVanimationLine.length > 0 && isAGVAnimation === false) {
+    isAGVAnimation = true
+    AGVanimation(AGVanimationLine)
+  }
+  requestAnimationFrame(AGVanimate)
+  TWEEN.update()
+  renderer.render(scene, camera)
+  labelRenderer.render(scene, camera)
+}
+
+AGVanimate()
+
+let floorData = {
+  floor3Data: {
+    x: 100,
+    z: 100
+  },
+  floor5Data: {
+    x: 1314,
+    z: 636
+  }
 }
-let floor3Data = {
+
-  x: 100,
+let agvData = {
-  y: 100
+  floor3AGVGroup: null,
+  floor3AGV: null,
+  floor3AGVData: {
+    x: 0,
+    z: 0,
+    rotate: 0
+  },
+  floor4AGVGroup: null,
+  floor4AGV: null,
+  floor5CCAGVGroup: null,
+  floor5CCAGV: null,
+  floor5BFAGVGroup: null,
+  floor5BFAGV: null,
+  floor5BFAGVGroupLocation: {},
+  floor5BFAGVData: {
+    x: 0,
+    y: 0,
+    rotate: 0
+  },
+  floor5CTUGroup: null,
+  floor5CTU: null
 }
-let floor4AGVGroup
-let floor5CCAGVGroup
-let floor5BFAGVGroup
-let floor5CTUGroup
-let floor4AGV
-let floor5CCAGV
-let floor5BFAGV
-let floor5CTU
 
 const getFloor5BFAGV = () => {
   let mtlLoader = new MTLLoader()
@@ -33,28 +83,27 @@ const getFloor5BFAGV = () => {
       loader.load(
         `/model/beifushiAGV005/beifushiAGV005.obj`,
         object => {
-          console.log(object)
           object.children[0].geometry.computeBoundingBox()
           let axis = new THREE.Vector3()
           axis.addVectors(object.children[0].geometry.boundingBox.min, object.children[0].geometry.boundingBox.max)
           axis.multiplyScalar(0.5)
           axis.applyMatrix4(object.children[0].matrixWorld)
-          console.log(axis)
 
-          floor3AGVGroup = new THREE.Group()
+          agvData.floor5BFAGVGroup = new THREE.Group()
           console.log(object)
-          floor3AGVGroup.add(object)
+          agvData.floor5BFAGVGroup.add(object)
           axis.z += 11.6
-          // floor3AGVGroup.position.set(0, 0, 0);
+          agvData.floor5BFAGVGroup.position.set(axis.x, axis.y, axis.z)
-          // const offset = axis.clone().sub(new THREE.Vector3(0, 0, 0));
+          agvData.floor5BFAGVGroupLocation = axis
-          floor3AGVGroup.position.set(axis.x, axis.y, axis.z)
           object.position.set(-axis.x, -axis.y, -axis.z)
-          scene.add(floor3AGVGroup)
+          agvData.floor5BFAGVData.x = axis.x
+          agvData.floor5BFAGVData.z = axis.z
+          scene.add(agvData.floor5BFAGVGroup)
 
           object.name = 'tishengji_tuopan'
           // scene.add(object)
 
-          floor3AGV = object
+          agvData.floor5BFAGV = object
           // 更新渲染器
           renderer.render(scene, camera)
         }
@@ -63,18 +112,196 @@ const getFloor5BFAGV = () => {
 }
 getFloor5BFAGV()
 
-const floor3AGVAnimation = (newLocation = 0, time = 2000) => {
+let AGVGroupEnum = {
-  return new Promise((resolve, reject) => {
+  '5BFAGV': 'floor5BFAGVGroupLocation'
-  })
+}
+let AGVDataEnum = {
+  '5BFAGV': 'floor5BFAGVData'
+}
+let groupEnum = {
+  '5BFAGV': 'floor5BFAGVGroup'
 }
+let floorEnum = {
+  '5BFAGV': 'floor5Data'
+}
+let rotateF = (e) => {
+  e %= 360
 
+  if (e > 180) {
+    return e - 360
+  }
+  if (e < -180) {
+    return e + 360
+  }
+  return e
+}
+const AGVAnimationF = (item, type, newLocation = 0, time = 2000) => {
+  let s = 1
+  newLocation %= 360
+  let AGVGroupLocationData = AGVGroupEnum[item]
+  let AGVLocationData = AGVDataEnum[item]
+  let group = groupEnum[item]
+  let floor = floorEnum[item]
+  switch (type) {
+    case 'x': {
+      return new Promise(async(resolve, reject) => {
+        let location = agvData[AGVGroupLocationData].x - (newLocation / 100) * floorData[floor].x
+        if ((agvData[group].position.x - location) > 0) {
+          await AGVAnimationF(item, 'rotate', 0)
+        } else {
+          await AGVAnimationF(item, 'rotate', 180)
+        }
+        if (agvData[AGVLocationData].x === location) {
+          resolve()
+        }
+        let distance = location - agvData[AGVLocationData].x
+
+        let time1 = setInterval(() => {
+          if ((distance > 0 && agvData[group].position.x >= location) || (distance < 0 && agvData[group].position.x <= location)) {
+            agvData[group].position.x = location
+            agvData[AGVLocationData].x = location
+            resolve()
+            clearInterval(time1)
+            clearTimeout(time3)
+          } else {
+            if (timeOrSpeed) {
+              if ((agvData[group].position.x - location) < 0) {
+                agvData[group].position.x += s
+              } else {
+                agvData[group].position.x -= s
+              }
+            } else {
+              agvData[group].position.x += distance / (time / 16)
+            }
+
+            agvData[AGVLocationData].x = agvData[group].position.x
+          }
+        }, 16)
+        let intervalTime
+        if (timeOrSpeed) {
+          intervalTime = (distance / ((((agvData[group].position.x - location) < 0) ? 1 : -1) * s) * 16) + 1000
+        } else {
+          intervalTime = time + 1000
+        }
+        let time3 = setTimeout(() => {
+          agvData[group].position.x = location
+          agvData[AGVLocationData].x = location
+          resolve()
+          clearInterval(time1)
+          clearTimeout(time3)
+        }, intervalTime)
+      })
+    }
+    case 'z': {
+      return new Promise(async(resolve, reject) => {
+        let location = agvData[AGVGroupLocationData].z + (newLocation / 100) * floorData[floor].z
+        if ((agvData[group].position.z - location) > 0) {
+          await AGVAnimationF(item, 'rotate', 270)
+        } else {
+          await AGVAnimationF(item, 'rotate', 90)
+        }
+        if (agvData[AGVLocationData].z === location) {
+          resolve()
+        }
+        let distance = location - agvData[AGVLocationData].z
+
+        let time1 = setInterval(() => {
+          if ((distance > 0 && agvData[group].position.z >= location) || (distance < 0 && agvData[group].position.z <= location)) {
+            agvData[group].position.z = location
+            agvData[AGVLocationData].z = location
+            resolve()
+            clearInterval(time1)
+            clearTimeout(time3)
+          } else {
+
+            if (timeOrSpeed) {
+              if ((agvData[group].position.z - location) < 0) {
+                agvData[group].position.z += s
+              } else {
+                agvData[group].position.z -= s
+              }
+            } else {
+              agvData[group].position.z += distance / (time / 16)
+            }
+
+            agvData[AGVLocationData].z = agvData[group].position.z
+          }
+        }, 16)
+        let intervalTime
+        if (timeOrSpeed) {
+          intervalTime = (distance / ((((agvData[group].position.z - location) < 0) ? 1 : -1) * s) * 16) + 1000
+        } else {
+          intervalTime = time + 1000
+        }
+        let time3 = setTimeout(() => {
+          agvData[group].position.z = location
+          agvData[AGVLocationData].z = location
+          resolve()
+          clearInterval(time1)
+          clearTimeout(time3)
+        }, intervalTime)
+      })
+    }
+    case 'rotate': {
+      return new Promise((resolve, reject) => {
+        let nowRotate = parseFloat((agvData[group].rotation.y / (Math.PI / 180)).toFixed(2))
+        nowRotate = rotateF(nowRotate)
+        newLocation = rotateF(newLocation)
+        let distance = newLocation - nowRotate
+        distance = rotateF(distance)
+        let nowRotateNum = agvData[group].rotation.y
+        let endRotateNum = nowRotateNum + (distance * (Math.PI / 180))
+        let bool = (nowRotateNum - endRotateNum) > 0
+
+        let time1 = setInterval(() => {
+          if ((bool && nowRotateNum < endRotateNum) || (!bool && nowRotateNum > endRotateNum)) {
+            agvData[group].rotation.y = (newLocation * (Math.PI / 180))
+            resolve()
+            clearInterval(time1)
+            clearTimeout(time2)
+          } else {
+            agvData[group].rotation.y += ((distance / (500 / 16)) * (Math.PI / 180))
+            nowRotateNum += ((distance / (500 / 16)) * (Math.PI / 180))
+          }
+        }, 16)
+        let time2 = setTimeout(() => {
+          agvData[group].rotation.y = (newLocation * (Math.PI / 180))
+          resolve()
+          clearInterval(time1)
+          clearTimeout(time2)
+        }, 500 + 1000)
+
+      })
+    }
+    default : {
+      return new Promise((resolve, reject) => {
+        resolve()
+      })
+    }
+  }
+
+}
+const AGVAnimation = (item, type, newLocation = 0, time = 2000) => {
+  AGVanimationLine.push(() => AGVAnimationF(item, type, newLocation, time))
+}
 setInterval(() => {
-  if (floor3AGVGroup) {
+  if (agvData.floor5BFAGVGroup) {
-    floor3AGVGroup.rotateY(90 * (Math.PI / 180))
   }
 }, 1000)
 setInterval(() => {
-  if (floor3AGVGroup) {
+  let num1 = Math.random()
-    // floor3AGVGroup.position.x -= 0.1
+  // let num1 = 0.6
+  // let num1 = 0.4
+  if (num1 > 0.5) {
+    let num2 = Math.random() * 100
+    AGVAnimation('5BFAGV', 'x', num2)
+  } else {
+    let num2 = Math.random() * 100
+    AGVAnimation('5BFAGV', 'z', num2)
   }
-}, 16)
+}, 1000)
+
+export {
+  agvData,
+  AGVAnimation
+}

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

@@ -28,6 +28,8 @@ const tishengjiAnimation = (model, floor, newLocation = 0, time = 2000) => {
       }
     }, 16)
     let time3 = setTimeout(() => {
+      model.position.y = newLocation
+      tishengjiLocation.y = newLocation
       resolve()
       clearInterval(time1)
       clearTimeout(time3)
@@ -56,6 +58,8 @@ const tuopanXAnimation = (model, newLocation = 0, time = 2000) => {
         }
       }, 16)
       let time3 = setTimeout(() => {
+        model.position.x = newLocation
+        tuopanLocation.x = newLocation
         resolve(0)
         clearInterval(time1)
         clearTimeout(time3)
@@ -84,6 +88,8 @@ const tuopanYAnimation = (model, floor, newLocation = 0, time = 2000) => {
       }
     }, 16)
     let time3 = setTimeout(() => {
+      model.position.y = newLocation
+      tuopanLocation.y = newLocation
       resolve()
       clearInterval(time1)
       clearTimeout(time3)

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楼"
@@ -65,6 +65,20 @@
         </el-option>
       </el-select>
       <el-button type="primary" @click="addtuopan">添加托盘</el-button>
+      <el-select v-model="fx" placeholder="方向">
+        <el-option
+          label="x"
+          value="x"
+        >
+        </el-option>
+        <el-option
+          label="z"
+          value="z"
+        >
+        </el-option>
+      </el-select>
+      <el-input-number v-model="num1" :step="0.1" label="描述文字"></el-input-number>
+      <el-button type="primary" @click="agvAn">移动agv</el-button>
     </div>
   </div>
 </template>
@@ -99,7 +113,10 @@ import {
   tuopanLocation,
   animationLine
 } from './setThree'
-import {} from './agv'
+
+import {
+  AGVAnimation, agvData
+} from './agv'
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
@@ -108,8 +125,11 @@ export default {
   data() {
     return {
       num: -60,
+      num1: 10,
       floor: 1,
-      tuopanFloor: 1
+      tuopanFloor: 1,
+      fx:'',
+      rotate:0
     }
   },
   mounted() {
@@ -120,8 +140,7 @@ export default {
 
     // loadF([ 'tishengji_tuopan'])
     // loadF(['tishengji', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'changfang002', 'changfang003', 'quanzidongchaibaojizhaungpeixian003', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'AGVchongdianzhuang005', 'changfang005', 'liku005'])
-    loadF([ 'changfang002', 'changfang003', 'changfang005',])
+    loadF(['changfang002', 'changfang003', 'changfang005'])
-
 
 // 创建CSS2DObject
 //     const label = this.$refs.demo
@@ -138,6 +157,7 @@ export default {
   },
   methods: {
     handleChange() {
+      agvData.floor5BFAGVGroup.position.z = this.num
       // tuopanModel.position.x = this.num
     },
     toFloor(e) {
@@ -169,6 +189,10 @@ export default {
       tuopanLocation.floor = this.tuopanFloor
       tuopanLocation.y = storeyHeight[this.tuopanFloor]
       tuopanLocation.x = storeyWidth[this.tuopanFloor]
+    },
+    agvAn() {
+      this.rotate -=this.num1
+      AGVAnimation('5BFAGV','rotate',this.rotate,)
     }
   }
 }

hw-ui/src/views/board/warehouse/fifthFloor.vue

@@ -243,37 +243,37 @@ export default {
           name: 'Browser share',
           data: [
             {
-              'name': 'Firefox',
+              'name': '材料1',
               y: 30.0,
               h: 30.0
             },
             {
-              name: 'IE',
+              name: '材料2',
               y: 26.8,
               h: 26.8
             },
             {
-              'name': 'a',
+              'name': '材料3',
               y: 15,
               h: 15
             },
             {
-              name: 'Chrome',
+              name: '材料4',
               y: 12.8,
               h: 12.8
             },
             {
-              'name': 'Safari',
+              'name': '材料5',
               y: 8.5,
               h: 8.5
             },
             {
-              'name': 'Opera',
+              'name': '材料6',
               y: 6.2,
               h: 6.2
             },
             {
-              'name': 'Others',
+              'name': '材料7',
               y: 0.7,
               h: 0.7
             }
@@ -353,37 +353,37 @@ export default {
           name: 'Browser share',
           data: [
             {
-              'name': 'Firefox',
+              'name': '材料1',
               y: 30.0,
               h: 30.0
             },
             {
-              name: 'IE',
+              name: '材料2',
               y: 26.8,
               h: 26.8
             },
             {
-              'name': 'a',
+              'name': '材料3',
               y: 15,
               h: 15
             },
             {
-              name: 'Chrome',
+              name: '材料4',
               y: 12.8,
               h: 12.8
             },
             {
-              'name': 'Safari',
+              'name': '材料5',
               y: 8.5,
               h: 8.5
             },
             {
-              'name': 'Opera',
+              'name': '材料6',
               y: 6.2,
               h: 6.2
             },
             {
-              'name': 'Others',
+              'name': '材料7',
               y: 0.7,
               h: 0.7
             }
@@ -463,37 +463,37 @@ export default {
           name: 'Browser share',
           data: [
             {
-              'name': 'Firefox',
+              'name': '材料1',
               y: 30.0,
               h: 30.0
             },
             {
-              name: 'IE',
+              name: '材料2',
               y: 26.8,
               h: 26.8
             },
             {
-              'name': 'a',
+              'name': '材料3',
               y: 15,
               h: 15
             },
             {
-              name: 'Chrome',
+              name: '材料4',
               y: 12.8,
               h: 12.8
             },
             {
-              'name': 'Safari',
+              'name': '材料5',
               y: 8.5,
               h: 8.5
             },
             {
-              'name': 'Opera',
+              'name': '材料6',
               y: 6.2,
               h: 6.2
             },
             {
-              'name': 'Others',
+              'name': '材料7',
               y: 0.7,
               h: 0.7
             }
@@ -573,37 +573,37 @@ export default {
           name: 'Browser share',
           data: [
             {
-              'name': 'Firefox',
+              'name': '材料1',
               y: 30.0,
               h: 30.0
             },
             {
-              name: 'IE',
+              name: '材料2',
               y: 26.8,
               h: 26.8
             },
             {
-              'name': 'a',
+              'name': '材料3',
               y: 15,
               h: 15
             },
             {
-              name: 'Chrome',
+              name: '材料4',
               y: 12.8,
               h: 12.8
             },
             {
-              'name': 'Safari',
+              'name': '材料5',
               y: 8.5,
               h: 8.5
             },
             {
-              'name': 'Opera',
+              'name': '材料6',
               y: 6.2,
               h: 6.2
             },
             {
-              'name': 'Others',
+              'name': '材料7',
               y: 0.7,
               h: 0.7
             }