123

src/assets/styles/index.scss

@@ -185,3 +185,6 @@ aside {
     margin-bottom: 10px;
   }
 }
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  background-color: #033b73 !important;
+}

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

@@ -206,7 +206,7 @@ const handleNodeClick = (value) => {
         width: 224px;
         margin: 0 10px;
         background: transparent;
-        color: #3cbfdf;
+        color: #fff;
     }
 
     .el-select {
@@ -218,7 +218,7 @@ const handleNodeClick = (value) => {
     }
 
     :deep(.el-input__inner) {
-        color: #3cbfdf;
+        color: #fff;
     }
 }
 </style>

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

@@ -124,7 +124,7 @@ const handleNodeClick = (value) => {
         width: 224px;
         margin: 0 10px;
         background: transparent;
-        color: #3cbfdf;
+        color: #fff;
     }
 
     .el-select {

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

@@ -1,7 +1,14 @@
 <template>
     <div>
         <div id="gltf"></div>
+        <div id="dom"></div>
         <div class="btnGroup">
+            <div class="button" @click="toHomeView">
+                主视角
+            </div>
+            <div class="button" @click="setLabel">
+                {{ isAddLabel ? '添加标签' : '移除标签' }}
+            </div>
             <div class="button" @click="walk">
                 漫游
             </div>
@@ -15,7 +22,13 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import TWEEN from "@tweenjs/tween.js";
-
+import {
+    CSS2DObject,
+    CSS2DRenderer,
+} from "three/examples/jsm/renderers/CSS2DRenderer";
+import Bus from '@/utils/bus.js'
+import bimStore from '@/store/modules/bim';
+import gsap from "gsap";
 onMounted(() => {
     init();
     loadSence();
@@ -23,14 +36,45 @@ onMounted(() => {
     document.addEventListener("click", onMouseDown);
     // document.addEventListener("mousemove", onMouseMove);
 });
-let scene, renderer, camera, controls;
+let scene, renderer, camera, controls, isAddLabel = true;
+let mouse = new THREE.Vector2();
+let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
+// 建筑树点击
+Bus.on('clickBuild', (isParent) => {
+    // Todo
+    console.log('clickBuild', isParent);
+    if (!isParent) {// 点击子级
+        var clickName = bimStore().activateTree.clickName;
+        var Floor = scene.getObjectByName(clickName);
+        // 拉近场景
+        // nearCamera(Floor);
+        centerSelectedGroup(Floor);
+        return;
+    }
+})
+// 设备树点击
+Bus.on('clickDevice', (isParent) => {
+    if (!isParent) {// 点击子级
+        var clickName = bimStore().activateDevice.clickName;
+        var Floor = scene.getObjectByName(clickName);
+        // 拉近距离
+        nearCamera(Floor);
+        return;
+    }
+})
+
+// 系统树点击
+Bus.on('clickApplication', e => {
+    // Todo
+    console.log('clickApplication');
+})
 const init = () => {
     // 场景
     scene = new THREE.Scene();
     // 相机
     camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
-    // camera.position.z = 5;
-    camera.position.set(-46.650, 67.456, 38.088);
+    // camera.position.z = 5;  
+    camera.position.set(-20.650, 5.456, 30.088);
     //渲染器
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setPixelRatio(window.devicePixelRatio);
@@ -93,7 +137,7 @@ const isSelent = (obj) => {
         }
     }
 }
-let mouse = new THREE.Vector2();
+ 
 let selectedObjects = ref([]);
 let selectBoxByClick, selectBoxByMouseon;
 var marginLeft = 0;
@@ -150,10 +194,6 @@ const centerSelectedGroup = (obj) => {
     tween.start();
 
 
-
-
-
-
     // let distance = 100
     // let angel = Math.PI / 5
 
@@ -189,10 +229,66 @@ const roam = (obj) => {
     tween.start();
 }
 let roamdObjects = ref([]);
-const walk = () => {
+// 返回初始值
+const toHomeView = () => {
+    controls.reset();
 }
+// 拉近距离
+const nearCamera = (floor) => {
+    controls.reset();
+    gsap.to(camera.position, {
+        x: floor.position.x,
+        y: floor.position.y,
+        z: floor.position.z,
+        duration: 2,
+        ease: "power1.inOut",
+        onComplete: () => {
+        },
+    });
+    
+}
+//标签
+const setLabel = () => {
+    if(isAddLabel) {
+        addLabel();
+    } else {
+        removeLabel();
+    }
+    isAddLabel = !isAddLabel;
+}
+// 添加标签
+const addLabel = () => {
+    let obj = scene.getObjectByName('set2');
+    console.log(123, obj);
+    let text = "设备二";
+    let pointLabel = createLableObj(text);
+    obj.add(pointLabel);
+    labelRenderer.setSize(window.innerWidth, window.innerHeight);
+    labelRenderer.domElement.style.position = "absolute";
+    labelRenderer.domElement.style.top = 0;
+    labelRenderer.domElement.style.pointerEvents = 'none';// 必须加上
+    document.body.appendChild(labelRenderer.domElement);
+
+    // 将呈现器的输出添加到HTML元素
+    document.getElementById("dom").appendChild(renderer.domElement);
+};
+const createLableObj = (text) => {
+    let laberDiv = document.createElement("div"); //创建div容器
+    laberDiv.className = "laber_name";
+    laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
+    let pointLabel = new CSS2DObject(laberDiv);
+    return pointLabel;
+};
+const removeLabel = () => {
+    document.body.removeChild(labelRenderer.domElement);
+}
+
 </script>
-<style scoped>
+<style lang='scss'>
+#gltf {
+    height: 100%;
+    width: 100%;
+}
 .btnGroup {
     width: 180px;
     position: absolute;
@@ -215,4 +311,44 @@ const walk = () => {
         margin-top: 10px;
     }
 }
+.laber_name {
+    width: 120px;
+    height: 90px;
+    padding: 5px 10px;
+    white-space: nowrap;
+    background-color: #ffffffb3;
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    font-size: 12px;
+    display: flex;
+    flex-direction: column;
+
+    &::before {
+        // content: "";
+        // display: inline-block;
+        // width: 0;
+        // height: 0;
+        // border: 12px solid transparent;
+        // border-right-color: #ffffffb3;
+        // position: absolute;
+        // left: -23px;
+        // top: 0;
+    }
+
+    .arrow_outer {
+        // position: absolute;
+        // left: -22px;
+        // top: 6px;
+        // margin: 0;
+        // width: 12px;
+        // height: 12px;
+        // background-color: #eb6852;
+        // border-radius: 100%;
+        // border: 1px solid #fff;
+    }
+
+    span {
+        line-height: 24px;
+    }
+}
 </style>