。。

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

@@ -31,32 +31,18 @@ const data = reactive({
             id: '0',
             children: [
                 {
-                    label: '原料糖化车间',
+                    label: '原料糖化车间一',
                     id: '0-1',
                     url: '/jz/glb/jz.gltf'
                     
                 },
                 {
-                    label: '原料糖化车间',
+                    label: '原料糖化车间二',
                     id: '0-2',
                     url: '/seraphine/scene.gltf'
                 },
             ],
-        },
+        }
-        {
-            label: '包装成品车间',
-            id: '1',
-            children: [
-                {
-                    label: '原料糖化车间',
-                    id: '1-1'
-                },
-                {
-                    label: '原料糖化车间',
-                    id: '1-2'
-                },
-            ],
-        },
     ],
     checkedkeys: ""
 });

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

@@ -0,0 +1,114 @@
+<template>
+    <canvas id="three"></canvas>
+</template>
+<script setup>
+import * as THREE from "three";
+import { ref, onMounted } from "vue";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+// 引入轨道控制器:支持鼠标左中右键操作和键盘方向键操作
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import {
+    CSS2DObject,
+    CSS2DRenderer,
+} from "three/examples/jsm/renderers/CSS2DRenderer";
+let scene = ref(null);
+let renderer = ref(null);
+let camera = ref(null);
+let orbit = ref(null);
+let group = ref(null);
+let mouse = new THREE.Vector2();
+let raycaster = new THREE.Raycaster();
+let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
+
+const props = defineProps({
+    background: { // 背景颜色
+        default: '#fff',
+        type: String
+    },
+    sceneUrl: { // 模型路径
+        default: '/jz/glb/jz.gltf',
+        type: String
+    },
+    light: {
+        default: '0xffffff',
+        type: String
+    }
+})
+
+watch(() => props.sceneUrl, val => {
+    console.log(123, val);
+    init();
+    loadSence();
+});
+onMounted(() => {
+    init();
+    loadSence();
+    // 启动动画
+    renderScene();
+});
+const init = () => {
+    scene = new THREE.Scene();
+    console.log(props.background);
+    scene.background = new THREE.Color(props.background);
+    const canvas = document.querySelector("#three");
+    var cubeLoader = new THREE.CubeTextureLoader();
+    // 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
+    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    camera = new THREE.PerspectiveCamera(
+        55,
+        window.innerWidth / window.innerHeight,
+        0.1,
+        20000
+    );
+    // 将摄像机对准场景的中心
+    camera.position.x = 100;
+    camera.position.y = 80;
+    camera.position.z = -150;
+    camera.lookAt(scene.position);
+    // 创建控件对象
+    orbit = new OrbitControls(camera, renderer.domElement);
+    orbit.autoRotate = true;
+    setTimeout(function () {
+        orbit.autoRotate = false;
+    }, 7000);
+    renderer.setClearColor(new THREE.Color("#0e0934"));
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    // 环境光 光源颜色从0x444444更改为0x888888,可以看到threejs场景中的网格模型表面变的更亮。
+    // intensity 强度属性0.5
+    var alight = new THREE.AmbientLight(props.light, 0.5);
+    alight.name = "aLight";
+    scene.add(alight);
+};
+
+const loadSence = () => {
+    const gltfLoader = new GLTFLoader();
+    gltfLoader.load(props.sceneUrl, (gltf) => {
+        console.log(1, gltf);
+        var model = gltf.scene;
+        scene.add(model);
+        // 将模型的材质里的emssive设置为material.color，如果材质里有纹理，再把emissiveMap设置为material.map
+        // gltf.scene.traverse(function (child) {
+        //   if (child.isMesh) {
+        //     child.material.emissive = child.material.color;
+        //     child.material.emissiveMap = child.material.map;
+        //   }
+        // });
+    });
+};
+
+const renderScene = () => {
+    orbit.update(); // 拖动
+    // 使用requestAnimationFrame函数进行渲染
+    requestAnimationFrame(renderScene);
+    renderer.render(scene, camera);
+    // 写在requestAnimationFrame之后,否则会报错
+    labelRenderer.render(scene, camera);
+};
+</script>
+<style lang='scss' scoped>
+#three {
+    height: 100%;
+    width: 100%;
+}
+</style>

src/views/bim/bimHome/index.vue

@@ -1,34 +1,27 @@
 <template>
   <div class="app-container">
-    <div id="three">
+    <!-- 模型 -->
-      <Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true }" resize>
+    <ThreeView background="#dcedff" :sceneUrl="sceneUrl"></ThreeView>
-        <Camera :position="{ x: 100, y: 80, z: -150 }" />
+    <!-- 底部菜单 -->
-        <Scene background="#353535">
+    <MenuTab @changeMenu="changeMenu"></MenuTab>
-          <AmbientLight></AmbientLight>
+    <!-- 左侧建筑菜单 -->
-          <GltfModel :src="bimUrl" @load="onReady" @progress="onProgress" @error="onError" />
+    <BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
-        </Scene>
+    <!-- 建筑信息 -->
-      </Renderer>
+    <BuildInfo v-if="activateIndex == 0"></BuildInfo>
-      <!-- 底部菜单 -->
+    <!-- 资产信息 -->
-      <MenuTab @changeMenu="changeMenu"></MenuTab>
+    <DevicePie v-if="activateIndex == 0"></DevicePie>
-      <!-- 左侧建筑菜单 -->
+    <!-- 左侧资产菜单 -->
-      <BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
+    <DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
-      <!-- 建筑信息 -->
+    <!-- 资产信息 -->
-      <BuildInfo v-if="activateIndex == 0"></BuildInfo>
+    <DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
-      <!-- 资产信息 -->
+    <!-- 资产事件 -->
-      <DevicePie v-if="activateIndex == 0"></DevicePie>
+    <DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
-      <!-- 左侧资产菜单 -->
+    <!-- 左侧应用菜单 -->
-      <DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
+    <ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
-      <!-- 资产信息 -->
+    <!-- 设备信息 -->
-      <DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
+    <EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
-      <!-- 资产事件 -->
+    <!-- 实时数据 -->
-      <DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
+    <RealData v-if="activateIndex == 2"></RealData>
-      <!-- 左侧应用菜单 -->
-      <ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
-      <!-- 设备信息 -->
-      <EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
-      <!-- 实时数据 -->
-      <RealData v-if="activateIndex == 2"></RealData>
-    </div>
   </div>
 </template>
 <script setup name="bimHome">
@@ -42,32 +35,17 @@ import DeviceEvent from './components/DeviceEvent.vue';
 import ApplicationTree from './components/ApplicationTree.vue';
 import EquipmentInfo from './components/EquipmentInfo.vue';
 import RealData from './components/RealData.vue';
+import ThreeView from './components/ThreeView.vue';
 import bimStore from '@/store/modules/bim';
-import {
-  AmbientLight,
-  PointLight,
-  Camera,
-  GltfModel,
-  Renderer,
-  Scene,
-} from 'troisjs';
-const renderer = ref(null);
-
 const data = reactive({
-  bimUrl: '/jz/glb/jz.gltf'
+  sceneUrl: '/jz/glb/jz.gltf'
 });
 
-const { bimUrl } = toRefs(data);
+const { sceneUrl } = toRefs(data);
 
 const activateIndex = computed(() =>
   bimStore().activateIndex
 );
-onMounted(() => {
-  renderer.value.onBeforeRender(() => {
-    // box.rotation.x += 0.01;
-    
-  });
-});
 
 const onReady = () => {
 }
@@ -79,8 +57,9 @@ const onProgress = () => {
 }
 
 const handleBuildClick = (value) => {
-  bimUrl.value = value.url;
+  sceneUrl.value = value.url;
-  console.log(value);
+  console.log(sceneUrl.value);
+
 }
 
 const handleDeviceClick = (value) => {
@@ -92,13 +71,13 @@ const handleApplicationClick = (value) => {
 }
 
 const changeMenu = () => {
-  
+
 }
 </script>
 <style lang='scss' scoped>
-#three {
+.app-container {
-  height: 900px;
-  width: 100%;
   position: relative;
+  width: 100%;
+  height: 900px;
 }
 </style>

src/views/bim/bimHome/index_three.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="app-container">
-    <canvas id="three"></canvas>
-  </div>
-</template>
-<script setup name="bimHome">
-import * as THREE from "three";
-import { ref, onMounted } from "vue";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-// 引入轨道控制器:支持鼠标左中右键操作和键盘方向键操作
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
-import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
-import {
-  CSS2DObject,
-  CSS2DRenderer,
-} from "three/examples/jsm/renderers/CSS2DRenderer";
-let scene = ref(null);
-let renderer = ref(null);
-let camera = ref(null);
-let orbit = ref(null);
-let group = ref(null);
-let mouse = new THREE.Vector2();
-let raycaster = new THREE.Raycaster();
-let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
-onMounted(() => {
-  init();
-  loadSence();
-  // 启动动画
-  renderScene();
-});
-const init = () => {
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color("#eee");
-  const canvas = document.querySelector("#three");
-  var cubeLoader = new THREE.CubeTextureLoader();
-  // 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
-  renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
-  camera = new THREE.PerspectiveCamera(
-    55,
-    window.innerWidth / window.innerHeight,
-    0.1,
-    20000
-  );
-  // 将摄像机对准场景的中心
-  camera.position.x = 100;
-  camera.position.y = 80;
-  camera.position.z = -150;
-  camera.lookAt(scene.position);
-  // 创建控件对象
-  orbit = new OrbitControls(camera, renderer.domElement);
-  orbit.autoRotate = true;
-  setTimeout(function () {
-    orbit.autoRotate = false;
-  }, 7000);
-  renderer.setClearColor(new THREE.Color("#0e0934"));
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  // 环境光 光源颜色从0x444444更改为0x888888,可以看到threejs场景中的网格模型表面变的更亮。
-  // intensity 强度属性0.5
-  var alight = new THREE.AmbientLight(0xffffff, 0.5);
-  alight.name = "aLight";
-  scene.add(alight);
-};
-
-const loadSence = () => {
-  const gltfLoader = new GLTFLoader();
-  gltfLoader.load("/jz/glb/jz.gltf", (gltf) => {
-    console.log(1, gltf);
-    var model = gltf.scene;
-    scene.add(model);
-    // 将模型的材质里的emssive设置为material.color，如果材质里有纹理，再把emissiveMap设置为material.map
-    // gltf.scene.traverse(function (child) {
-    //   if (child.isMesh) {
-    //     child.material.emissive = child.material.color;
-    //     child.material.emissiveMap = child.material.map;
-    //   }
-    // });
-  });
-};
-
-const renderScene = () => {
-  orbit.update(); // 拖动
-  // 使用requestAnimationFrame函数进行渲染
-  requestAnimationFrame(renderScene);
-  renderer.render(scene, camera);
-  // 写在requestAnimationFrame之后,否则会报错
-  labelRenderer.render(scene, camera);
-};
-</script>
-<style lang='scss' scoped>
-#three {
-  height: 900px;
-  width: 100%;
-}
-</style>

src/views/bim/bimHome/index_trois.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <div id="three">
+      <Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true }" resize>
+        <Camera :position="{ x: 100, y: 80, z: -150 }" />
+        <Scene background="#353535">
+          <AmbientLight></AmbientLight>
+          <GltfModel :src="bimUrl" @load="onReady" @progress="onProgress" @error="onError" />
+        </Scene>
+      </Renderer>
+      <!-- 底部菜单 -->
+      <MenuTab @changeMenu="changeMenu"></MenuTab>
+      <!-- 左侧建筑菜单 -->
+      <BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
+      <!-- 建筑信息 -->
+      <BuildInfo v-if="activateIndex == 0"></BuildInfo>
+      <!-- 资产信息 -->
+      <DevicePie v-if="activateIndex == 0"></DevicePie>
+      <!-- 左侧资产菜单 -->
+      <DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
+      <!-- 资产信息 -->
+      <DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
+      <!-- 资产事件 -->
+      <DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
+      <!-- 左侧应用菜单 -->
+      <ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
+      <!-- 设备信息 -->
+      <EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
+      <!-- 实时数据 -->
+      <RealData v-if="activateIndex == 2"></RealData>
+    </div>
+  </div>
+</template>
+<script setup name="bimHome">
+import MenuTab from './components/MenuTab.vue';
+import BuildTree from './components/BuildTree.vue';
+import BuildInfo from './components/BuildInfo.vue';
+import DevicePie from './components/DevicePie.vue';
+import DeviceTree from './components/DeviceTree.vue';
+import DeviceInfo from './components/DeviceInfo.vue';
+import DeviceEvent from './components/DeviceEvent.vue';
+import ApplicationTree from './components/ApplicationTree.vue';
+import EquipmentInfo from './components/EquipmentInfo.vue';
+import RealData from './components/RealData.vue';
+import bimStore from '@/store/modules/bim';
+import {
+  AmbientLight,
+  PointLight,
+  Camera,
+  GltfModel,
+  Renderer,
+  Scene,
+} from 'troisjs';
+const renderer = ref(null);
+
+const data = reactive({
+  bimUrl: '/jz/glb/jz.gltf'
+});
+
+const { bimUrl } = toRefs(data);
+
+const activateIndex = computed(() =>
+  bimStore().activateIndex
+);
+onMounted(() => {
+  renderer.value.onBeforeRender(() => {
+    // box.rotation.x += 0.01;
+    
+  });
+});
+
+const onReady = () => {
+}
+
+const onError = () => {
+}
+
+const onProgress = () => {
+}
+
+const handleBuildClick = (value) => {
+  bimUrl.value = value.url;
+  console.log(value);
+}
+
+const handleDeviceClick = (value) => {
+  console.log(value);
+}
+
+const handleApplicationClick = (value) => {
+  console.log(value);
+}
+
+const changeMenu = () => {
+  
+}
+</script>
+<style lang='scss' scoped>
+#three {
+  height: 900px;
+  width: 100%;
+  position: relative;
+}
+</style>