123

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

@@ -1,6 +1,7 @@
 <template>
     <div>
         <div id="gltf"></div>
+        <div id="dom"></div>
         <div class="btnGroup">
             <div class="button" @click="toHomeView">
                 主视角
@@ -20,7 +21,13 @@ import * as THREE from 'three';
 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 {
+    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();
@@ -28,14 +35,47 @@ onMounted(() => {
     document.addEventListener("click", onMouseDown);
     // document.addEventListener("mousemove", onMouseMove);
 });
-let scene, renderer, camera;
+let scene, renderer, camera, orbit, 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);
+        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.set(-66.650, 0, 80.088);
+ 
     //渲染器
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setPixelRatio(window.devicePixelRatio);
@@ -43,7 +83,8 @@ const init = () => {
     renderer.outputEncoding = THREE.sRGBEncoding;
     document.getElementById('gltf').appendChild(renderer.domElement);
 
-    const controls = new OrbitControls(camera, renderer.domElement);
+    orbit = new OrbitControls(camera, renderer.domElement);
+
     const pmremGenerator = new THREE.PMREMGenerator(renderer);
     scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
 }
@@ -87,32 +128,11 @@ const isSelent = (obj) => {
         }
     }
 }
-let mouse = new THREE.Vector2();
+// 鼠标点击效果
 let selectedObjects = ref([]);
 let selectBoxByClick, selectBoxByMouseon;
 var marginLeft = 0;
 var marginTop = 70;
-// 鼠标移动效果
-const onMouseMove = (event) => {
-    var raycaster = new THREE.Raycaster()
-    mouse.x = ((event.clientX-marginLeft) / window.innerWidth) * 2 - 1;
-    mouse.y = -((event.clientY-marginTop) / window.innerHeight) * 2 + 1;
-    raycaster.setFromCamera(mouse, camera);
-    const intersects = raycaster.intersectObjects(scene.children, true);
-    if (intersects.length > 0) {
-        const clickedObject = intersects[0].object;
-        var selectedObject = isSelent(clickedObject);
-        if (selectedObject) {
-            selectedObjects[0] = selectedObject;
-            if (selectBoxByMouseon) {
-                scene.remove(selectBoxByMouseon);
-            }
-            selectBoxByMouseon = new THREE.BoxHelper(selectedObjects[0], '#ffffff');
-            scene.add(selectBoxByMouseon);
-        }
-    }
-}
-// 鼠标点击效果
 const onMouseDown = (event) => {
     var raycaster = new THREE.Raycaster()
     mouse.x = ((event.clientX-marginLeft) / window.innerWidth) * 2 - 1;
@@ -133,8 +153,65 @@ const onMouseDown = (event) => {
         }
     }
 }
+// 返回初始值
+const toHomeView = () => {
+    orbit.reset();
+}
+// 拉近距离
+const nearCamera = (floor) => {
+    orbit.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;
@@ -157,4 +234,44 @@ const onMouseDown = (event) => {
         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>