场景切换

.env.development

@@ -7,7 +7,7 @@ ENV = 'development'
 # 若依管理系统/开发环境
 # VUE_APP_BASE_API = '/dev-api'
 # VUE_APP_BASE_API = 'http://192.168.1.25:8080'
-VUE_APP_BASE_API = 'http://192.168.142.241:8080'
+VUE_APP_BASE_URL = ''
 # VUE_APP_BASE_API = 'http://8.141.121.71:8080'
 
 # 路由懒加载

src/utils/plane_grass.js

@@ -157,5 +157,11 @@ class Grass extends THREE.Mesh {
   }
 }
 
+
 const planeGrass = new Grass(50, 100000)
+function animate(time) {
+  planeGrass.update(time)
+  requestAnimationFrame(animate)
+}
+animate()
 export { planeGrass }

src/utils/three.js

@@ -518,6 +518,8 @@ export function drawAxes(element, options = {}, ballCallBack) {
   composer.addPass(fxaa);
 
   /* ========== 环境光照/HDR环境贴图 ========== */
+  console.log(process.env.VUE_APP_BASE_URL);
+
   new RGBELoader().load(process.env.VUE_APP_BASE_URL + "/hdr/basic.hdr", (tex) => {
     tex.mapping = THREE.EquirectangularReflectionMapping;
     scene.environment = tex;

src/views/bigScreen/home/index.vue

@@ -47,6 +47,18 @@
         <img :src="diaUrl" alt="" style="width: 100%; height: 100%;">
       </div>
     </el-dialog>
+    <div class="operate-box">
+      <el-button type="primary" @click="changeScene('ocean')">
+        海洋
+      </el-button>
+      <el-button type="primary" @click="changeScene('grass')">
+        草地
+      </el-button>
+      <el-button type="primary" @click="changeScene('desert')">
+        沙漠
+      </el-button>
+    </div>
+
   </div>
 </template>
 
@@ -261,9 +273,14 @@ export default {
     this.demo1 = drawAxes(sceneBox, options, (falg, val) => {
       this.onBallClick(falg, val)
     })
+
     this.legendList = this.demo1.getGroups()
-    // planeDesert.position.set(25, 2, 25)
-    // this.demo1.scene.add(planeDesert)
+    planeGrass.visible = false
+    planeGrass.position.set(25, 1, 25)
+    this.demo1.scene.add(planeGrass)
+    planeDesert.visible = false
+    planeDesert.position.set(25, 2, 25)
+    this.demo1.scene.add(planeDesert)
     ocean.position.set(25, 1, 25)
     this.demo1.scene.add(ocean)
   },
@@ -419,6 +436,21 @@ export default {
       this.imgIndex = -1
       done()
     },
+    changeScene(scene) {
+      if (scene == 'grass') {
+        planeGrass.visible = true
+        planeDesert.visible = false
+        ocean.visible = false
+      } else if (scene == 'desert') {
+        planeGrass.visible = false
+        planeDesert.visible = true
+        ocean.visible = false
+      } else if (scene == 'ocean') {
+        planeGrass.visible = false
+        planeDesert.visible = false
+        ocean.visible = true
+      }
+    },
     handleCheck(v, k) {
       if (this.legendList[k]) this.legendList[k].visible = !this.legendList[k].visible;
     },
@@ -668,3 +700,24 @@ export default {
   }
 }
 </style>
+
+
+<style lang="scss" scoped>
+.operate-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 100px;
+  height: 300px;
+  background-color: #000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .el-button {
+    display: block;
+  }
+}
+</style>