更换模型背景

package.json

@@ -5,7 +5,7 @@
   "author": "若依",
   "license": "MIT",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host=0.0.0.0",
     "build:prod": "vite build",
     "build:stage": "vite build --mode staging",
     "preview": "vite preview"

src/store/modules/bim.js

@@ -6,13 +6,21 @@ const bimStore = defineStore(
             activateTree: {},
             activateDevice: {},
             activateApplication: {},
-            deviceNum: ''
+            deviceNum: '',
+            activateMenu: {
+                name: '建筑信息',
+        background: '#202a60'
+            }
         }),
         actions: {
             // 菜单
             setActivateIndex(index) {
                 this.activateIndex = index;
             },
+
+            setActivateMenu(item) {
+                this.activateMenu = item;
+            },
             // 建筑树选中
             setActivateTree(item) {
                 this.activateTree = item;

src/views/bim/bimHome/components/MenuTab.vue

@@ -1,21 +1,25 @@
 <template>
     <div class="menuDiv">
-        <div v-for="(item, index) of menuList" :key="index" @click="changeMenu(index)"
+        <div v-for="(item, index) of menuList" :key="index" @click="changeMenu(index, item)"
             :class="{ 'activateTab': index == activateIndex }">{{ item.name }}</div>
     </div>
 </template>
 <script setup>
 import bimStore from '@/store/modules/bim';
+import { onMounted } from 'vue';
 
 const menuList = [
     {
-        name: '建筑信息'
+        name: '建筑信息',
+        background: '#000000'
     },
     {
-        name: '资产信息'
+        name: '资产信息',
+        background: '#2b2f48'
     },
     {
-        name: 'BIM应用'
+        name: 'BIM应用',
+        background: '#212b5f'
     }
 ]
 
@@ -23,11 +27,16 @@ const data = reactive({
     activateIndex: 0
 });
 
+onMounted(() => {
+    changeMenu(0, menuList[0]);
+})
+
 const { activateIndex } = toRefs(data);
 const emit = defineEmits(['changeMenu'])
-const changeMenu = (index) => {
+const changeMenu = (index, item) => {
     activateIndex.value = index;
     bimStore().setActivateIndex(index);
+    bimStore().setActivateMenu(item);
     emit('changeMenu', index)
 }
 </script>

src/views/bim/bimHome/components/ThreeView2.vue

@@ -16,7 +16,7 @@
     </div>
 </template>
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref,watch } from 'vue';
 import * as THREE from 'three';
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js";
@@ -80,9 +80,17 @@ Bus.on('clickApplication', e => {
     console.log('clickApplication');
 })
 
+watch(() => bimStore().activateMenu, value => {
+    console.log(1,scene);
+    // 更换场景颜色
+    scene.background = new THREE.Color(value.background);
+    toHomeView();
+},{ deep: true });
+
 const init = () => {
     // 场景
     scene = new THREE.Scene();
+    scene.background = new THREE.Color(bimStore().activateMenu.background);
     // 相机
     camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
     // camera.position.z = 5;  

src/views/bim/bimHome/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!-- 场景模型 -->
-    <ThreeView background="#202a60" light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
+    <ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
     <!-- <ThreeModel /> -->
     <!-- 底部菜单 -->
     <MenuTab @changeMenu="changeMenu"></MenuTab>
@@ -55,7 +55,7 @@ import DeviceDetial from './components/DeviceDetial.vue';
 import bimStore from '@/store/modules/bim';
 import { computed } from 'vue';
 const data = reactive({
-  sceneUrl: '',
+  sceneUrl: '/jz/glb/scene.gltf',
   equimentInfo: {},
 });