添加楼层切换

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

@@ -1,21 +1,28 @@
 <template>
   <div>
+    <div class="bottomBg">
+      <div class="item1F" @click="toggle1">1F</div>
+      <div class="item2F" @click="toggle2">2F</div>
+      <div class="item3F" @click="toggle3">3F</div>
+      <div class="item4F" @click="toggle4">4F</div>
+      <div class="item5F" @click="toggle5">5F</div>
+    </div>
     <div ref="threeJs" class="app-container">
     </div>
-    <div ref="demo" class="model">
-      <Demo ref="demoData"/>
+    <div ref="modelInfo" class="model" style="display: inline-block">
+      <Demo ref="modelInfoData"/>
     </div>
-    <div ref="demo1" class="model">
-      <Demo ref="demo1Data"/>
+    <div ref="modelInfo1" class="model">
+      <Demo ref="modelInfo1Data"/>
     </div>
-    <div ref="demo2" class="model">
-      <Demo ref="demo2Data"/>
+    <div ref="modelInfo2" class="model">
+      <Demo ref="modelInfo2Data"/>
     </div>
-    <div ref="demo3" class="model">
-      <Demo ref="demo3Data"/>
+    <div ref="modelInfo3" class="model">
+      <Demo ref="modelInfo3Data"/>
     </div>
-    <div ref="demo4" class="model">
-      <Demo ref="demo4Data"/>
+    <div ref="modelInfo4" class="model">
+      <Demo ref="modelInfo4Data"/>
     </div>
     <div style="position:absolute;top: 0;left: 0;">
       <el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>
@@ -49,6 +56,7 @@
       <el-button type="primary" @click="tuopanReset">托盘复位</el-button>
       <el-button type="primary" @click="tuopanOut">托盘推出</el-button>
       <el-button type="primary" @click="removetuopan">删除托盘</el-button>
+      <el-button type="primary" @click="toggle">显示/隐藏</el-button>
       <el-select v-model="tuopanFloor" placeholder="去几楼">
         <el-option
           label="1楼"
@@ -120,11 +128,20 @@ import {
   scene,
   camera,
   renderer,
-  loadF,
+  loadF1,
+  loadF2,
+  loadF3,
+  loadF4,
+  loadF5,
   storeyHeight,
   storeyWidth,
   tuopanLocation,
-  animationLine, isLoading
+  animationLine, isLoading,
+  floor1Model,
+  floor2Model,
+  floor3Model,
+  floor4Model,
+  floor5Model, loadFOther, otherModel
 } from './setThree'
 
 import {
@@ -152,31 +169,31 @@ export default {
           this.modelData = e.data
           e.data.agvStatusList.forEach(v => {
             if (v.agvName === '2楼叉车') {
-              this.$refs.demoData.setData(v)
+              this.$refs.modelInfoData.setData(v)
               let x = (v.posX - floorOrigin.floor2Data.x) / floorData1.floor2Data.x
               let z = (v.posY - floorOrigin.floor2Data.y) / floorData1.floor2Data.z
               AGVAnimation('2AGV', '2AGV', 'xz', { x: x * 100, z: z * 100 })
             }
             if (v.agvName === '3楼叉车') {
-              this.$refs.demo1Data.setData(v)
+              this.$refs.modelInfo1Data.setData(v)
               let x = (v.posX - floorOrigin.floor3Data.x) / floorData1.floor3Data.x
               let z = (v.posY - floorOrigin.floor3Data.y) / floorData1.floor3Data.z
               AGVAnimation('3AGV', '3AGV', 'xz', { x: x * 100, z: z * 100 })
             }
             if (v.agvName === '5楼叉车') {
-              this.$refs.demo2Data.setData(v)
+              this.$refs.modelInfo2Data.setData(v)
               let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
               let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
               AGVAnimation('5CCAGV', '5CCAGV', 'xz', { x: x * 100, z: z * 100 })
             }
             if (v.agvName === '5楼背负式') {
-              this.$refs.demo3Data.setData(v)
+              this.$refs.modelInfo3Data.setData(v)
               let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
               let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
               AGVAnimation('5BFAGV', '5BFAGV', 'xz', { x: x * 100, z: z * 100 })
             }
             if (v.agvName === '5楼CTU') {
-              this.$refs.demo4Data.setData(v)
+              this.$refs.modelInfo4Data.setData(v)
               let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
               let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
               AGVAnimation('5CTU', '5CTU', 'x', { x: x * 100, z: z * 100 })
@@ -216,15 +233,23 @@ export default {
     // controls.enableZoom = false
 
     // loadF([ 'tishengji_tuopan'])
-    loadF(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005', 'changfang002', 'changfang003', 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'Uxingxian'])
+    // loadF1([ 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'Uxingxian'])
+    // loadF2(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005','changfang002', 'changfang003',])
+
+    loadF1([])
+    loadF2(['AGVchongdianzhuang002', 'changfang002'])
+    loadF3(['AGVchongdianzhuang003', 'changfang003', 'quanzidongchaibaojizhaungpeixian003'])
+    loadF4([])
+    loadF5(['AGVchongdianzhuang005', '2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'changfang005', 'liku005', 'Uxingxian'])
+    loadFOther(['tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan'])
     // loadF(['changfang002', 'changfang003', 'changfang005'])
 
 // 创建CSS2DObject
-    agvLabel['2AGV'] = new CSS2DObject(this.$refs.demo)
-    agvLabel['3AGV'] = new CSS2DObject(this.$refs.demo1)
-    agvLabel['5CCAGV'] = new CSS2DObject(this.$refs.demo2)
-    agvLabel['5BFAGV'] = new CSS2DObject(this.$refs.demo3)
-    agvLabel['5CTU'] = new CSS2DObject(this.$refs.demo4)
+    agvLabel['2AGV'] = new CSS2DObject(this.$refs.modelInfo)
+    agvLabel['3AGV'] = new CSS2DObject(this.$refs.modelInfo1)
+    agvLabel['5CCAGV'] = new CSS2DObject(this.$refs.modelInfo2)
+    agvLabel['5BFAGV'] = new CSS2DObject(this.$refs.modelInfo3)
+    agvLabel['5CTU'] = new CSS2DObject(this.$refs.modelInfo4)
 
     loadAGV(['chacheshiAGV002', 'chacheshiAGV003', 'chacheshiAGV005', 'beifushiAGV005', 'CTU005'])
 
@@ -275,6 +300,115 @@ export default {
     agvAn() {
       this.rotate -= this.num1
       AGVAnimation('3AGV', 'rotate', this.rotate)
+    },
+    toggle() {
+      console.log(agvData)
+      floor1Model.visible = true
+      floor2Model.visible = true
+      floor3Model.visible = true
+      floor4Model.visible = true
+      floor5Model.visible = true
+      otherModel.visible = true
+      agvData.floor2AGVGroup.visible = true
+      agvData.floor3AGVGroup.visible = true
+      agvData.floor5BFAGVGroup.visible = true
+      agvData.floor5CCAGVGroup.visible = true
+      agvData.floor5CTUGroup.visible = true
+      this.$refs.modelInfoData.$el.style.display = 'inline-block'
+      this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
+      this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
+      this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
+      this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
+    },
+    toggle1() {
+      floor1Model.visible = true
+      floor2Model.visible = false
+      floor3Model.visible = false
+      floor4Model.visible = false
+      floor5Model.visible = false
+      otherModel.visible = false
+      this.$refs.modelInfoData.$el.style.display = 'none'
+      this.$refs.modelInfo1Data.$el.style.display = 'none'
+      this.$refs.modelInfo2Data.$el.style.display = 'none'
+      this.$refs.modelInfo3Data.$el.style.display = 'none'
+      this.$refs.modelInfo4Data.$el.style.display = 'none'
+      agvData.floor2AGVGroup.visible = false
+      agvData.floor3AGVGroup.visible = false
+      agvData.floor5BFAGVGroup.visible = false
+      agvData.floor5CCAGVGroup.visible = false
+      agvData.floor5CTUGroup.visible = false
+    },
+    toggle2() {
+      floor1Model.visible = false
+      floor2Model.visible = true
+      floor3Model.visible = false
+      floor4Model.visible = false
+      floor5Model.visible = false
+      otherModel.visible = false
+      agvData.floor2AGVGroup.visible = true
+      agvData.floor3AGVGroup.visible = false
+      agvData.floor5BFAGVGroup.visible = false
+      agvData.floor5CCAGVGroup.visible = false
+      agvData.floor5CTUGroup.visible = false
+      this.$refs.modelInfoData.$el.style.display = 'inline-block'
+      this.$refs.modelInfo1Data.$el.style.display = 'none'
+      this.$refs.modelInfo2Data.$el.style.display = 'none'
+      this.$refs.modelInfo3Data.$el.style.display = 'none'
+      this.$refs.modelInfo4Data.$el.style.display = 'none'
+    },
+    toggle3() {
+      floor1Model.visible = false
+      floor2Model.visible = false
+      floor3Model.visible = true
+      floor4Model.visible = false
+      floor5Model.visible = false
+      otherModel.visible = false
+      agvData.floor2AGVGroup.visible = false
+      agvData.floor3AGVGroup.visible = true
+      agvData.floor5BFAGVGroup.visible = false
+      agvData.floor5CCAGVGroup.visible = false
+      agvData.floor5CTUGroup.visible = false
+      this.$refs.modelInfoData.$el.style.display = 'none'
+      this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
+      this.$refs.modelInfo2Data.$el.style.display = 'none'
+      this.$refs.modelInfo3Data.$el.style.display = 'none'
+      this.$refs.modelInfo4Data.$el.style.display = 'none'
+    },
+    toggle4() {
+      floor1Model.visible = false
+      floor2Model.visible = false
+      floor3Model.visible = false
+      floor4Model.visible = true
+      floor5Model.visible = false
+      otherModel.visible = false
+      this.$refs.modelInfoData.$el.style.display = 'none'
+      this.$refs.modelInfo1Data.$el.style.display = 'none'
+      this.$refs.modelInfo2Data.$el.style.display = 'none'
+      this.$refs.modelInfo3Data.$el.style.display = 'none'
+      this.$refs.modelInfo4Data.$el.style.display = 'none'
+      agvData.floor2AGVGroup.visible = false
+      agvData.floor3AGVGroup.visible = false
+      agvData.floor5BFAGVGroup.visible = false
+      agvData.floor5CCAGVGroup.visible = false
+      agvData.floor5CTUGroup.visible = false
+    },
+    toggle5() {
+      floor1Model.visible = false
+      floor2Model.visible = false
+      floor3Model.visible = false
+      floor4Model.visible = false
+      floor5Model.visible = true
+      otherModel.visible = false
+      this.$refs.modelInfoData.$el.style.display = 'none'
+      this.$refs.modelInfo1Data.$el.style.display = 'none'
+      this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
+      this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
+      this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
+      agvData.floor2AGVGroup.visible = false
+      agvData.floor3AGVGroup.visible = false
+      agvData.floor5BFAGVGroup.visible = true
+      agvData.floor5CCAGVGroup.visible = true
+      agvData.floor5CTUGroup.visible = true
     }
   }
 }
@@ -287,4 +421,54 @@ export default {
 .model {
   position: relative;
 }
+
+.bottomBg {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 2.656vw;
+  background-image: url("~@/assets/model/bottomBg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+
+  .item1F, .item2F, .item3F, .item4F, .item5F {
+    position: absolute;
+    top: 45%;
+    transform: translate(-50%, -50%);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 4.6vw;
+    height: 1.32vw;
+    line-height: 1.32vw;
+    text-align: center;
+    color: #fff;
+  }
+
+  .item1F {
+    left: 39%;
+    background-image: url("~@/assets/model/unselected.png");
+  }
+
+  .item2F {
+    left: 44.5%;
+    background-image: url("~@/assets/model/unselected.png");
+  }
+
+  .item3F {
+    left: 50%;
+    background-image: url("~@/assets/model/unselected.png");
+  }
+
+  .item4F {
+    left: 55.5%;
+    background-image: url("~@/assets/model/unselected.png");
+  }
+
+  .item5F {
+    left: 61%;
+    background-image: url("~@/assets/model/unselected.png");
+  }
+}
 </style>

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

@@ -117,7 +117,193 @@ const loadingManager = new THREE.LoadingManager()
 loadingManager.onLoad = function() {
   isLoading = true
 }
-const loadF = (e) => {
+
+let floor1Model = new THREE.Group()
+let floor2Model = new THREE.Group()
+let floor3Model = new THREE.Group()
+let floor4Model = new THREE.Group()
+let floor5Model = new THREE.Group()
+let otherModel = new THREE.Group()
+scene.add(floor1Model)
+scene.add(floor2Model)
+scene.add(floor3Model)
+scene.add(floor4Model)
+scene.add(floor5Model)
+scene.add(otherModel)
+
+
+
+const loadF1 = (e) => {
+  e.forEach(v => {
+    let mtlLoader = new MTLLoader()
+    mtlLoader.load(`/model/${v}/${v}.mtl`,
+      materials => {
+        materials.preload()
+        let loader = new OBJLoader(loadingManager)
+        loader.setMaterials(materials)
+        loader.load(
+          `/model/${v}/${v}.obj`,
+          object => {
+            object.name = v
+            scene.add(object)
+            floor1Model.add(object)
+
+            if (v === 'tishengji_keyidongbufen') {
+              keyidongModel = object
+            }
+            if (v === 'tishengji_tuopan') {
+              tuopanModel = object
+            }
+            // 更新渲染器
+            renderer.render(scene, camera)
+          },
+          xhr => {
+
+          },
+          (err) => {
+            loadF([e])
+          }
+        )
+      })
+  })
+}
+const loadF2 = (e) => {
+  e.forEach(v => {
+    let mtlLoader = new MTLLoader()
+    mtlLoader.load(`/model/${v}/${v}.mtl`,
+      materials => {
+        materials.preload()
+        let loader = new OBJLoader(loadingManager)
+        loader.setMaterials(materials)
+        loader.load(
+          `/model/${v}/${v}.obj`,
+          object => {
+            object.name = v
+            scene.add(object)
+            floor2Model.add(object)
+
+            if (v === 'tishengji_keyidongbufen') {
+              keyidongModel = object
+            }
+            if (v === 'tishengji_tuopan') {
+              tuopanModel = object
+            }
+            // 更新渲染器
+            renderer.render(scene, camera)
+          },
+          xhr => {
+
+          },
+          (err) => {
+            loadF([e])
+          }
+        )
+      })
+  })
+}
+const loadF3 = (e) => {
+  e.forEach(v => {
+    let mtlLoader = new MTLLoader()
+    mtlLoader.load(`/model/${v}/${v}.mtl`,
+      materials => {
+        materials.preload()
+        let loader = new OBJLoader(loadingManager)
+        loader.setMaterials(materials)
+        loader.load(
+          `/model/${v}/${v}.obj`,
+          object => {
+            object.name = v
+            scene.add(object)
+            floor3Model.add(object)
+
+            if (v === 'tishengji_keyidongbufen') {
+              keyidongModel = object
+            }
+            if (v === 'tishengji_tuopan') {
+              tuopanModel = object
+            }
+            // 更新渲染器
+            renderer.render(scene, camera)
+          },
+          xhr => {
+
+          },
+          (err) => {
+            loadF([e])
+          }
+        )
+      })
+  })
+}
+const loadF4 = (e) => {
+  e.forEach(v => {
+    let mtlLoader = new MTLLoader()
+    mtlLoader.load(`/model/${v}/${v}.mtl`,
+      materials => {
+        materials.preload()
+        let loader = new OBJLoader(loadingManager)
+        loader.setMaterials(materials)
+        loader.load(
+          `/model/${v}/${v}.obj`,
+          object => {
+            object.name = v
+            scene.add(object)
+            floor4Model.add(object)
+
+            if (v === 'tishengji_keyidongbufen') {
+              keyidongModel = object
+            }
+            if (v === 'tishengji_tuopan') {
+              tuopanModel = object
+            }
+            // 更新渲染器
+            renderer.render(scene, camera)
+          },
+          xhr => {
+
+          },
+          (err) => {
+            loadF([e])
+          }
+        )
+      })
+  })
+}
+const loadF5 = (e) => {
+  e.forEach(v => {
+    let mtlLoader = new MTLLoader()
+    mtlLoader.load(`/model/${v}/${v}.mtl`,
+      materials => {
+        materials.preload()
+        let loader = new OBJLoader(loadingManager)
+        loader.setMaterials(materials)
+        loader.load(
+          `/model/${v}/${v}.obj`,
+          object => {
+            object.name = v
+            scene.add(object)
+            floor5Model.add(object)
+
+            if (v === 'tishengji_keyidongbufen') {
+              keyidongModel = object
+            }
+            if (v === 'tishengji_tuopan') {
+              tuopanModel = object
+            }
+            // 更新渲染器
+            renderer.render(scene, camera)
+          },
+          xhr => {
+
+          },
+          (err) => {
+            loadF([e])
+          }
+        )
+      })
+  })
+}
+const loadFOther = (e) => {
   e.forEach(v => {
     let mtlLoader = new MTLLoader()
     mtlLoader.load(`/model/${v}/${v}.mtl`,
@@ -130,6 +316,7 @@ const loadF = (e) => {
           object => {
             object.name = v
             scene.add(object)
+            otherModel.add(object)
 
             if (v === 'tishengji_keyidongbufen') {
               keyidongModel = object
@@ -185,11 +372,22 @@ export {
   scene,
   camera,
   renderer,
-  loadF,
+  loadF1,
+  loadF2,
+  loadF3,
+  loadF4,
+  loadF5,
+  loadFOther,
   animationLine,
   labelRenderer,
   storeyHeight,
   storeyWidth,
   tuopanLocation,
-  tishengjiLocation
+  tishengjiLocation,
+  floor1Model,
+  floor2Model,
+  floor3Model,
+  floor4Model,
+  floor5Model,
+  otherModel,
 }