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

@@ -91,7 +91,6 @@ Bus.on('clickDevice', (isParent) => {
     if (!isParent) {// 点击子级
         var clickName = bimStore().activateDevice.clickName;
         var Floor = scene.getObjectByName(clickName);
-        removeLabel();
         boxLight(Floor);
         // 拉近距离
         // nearCamera(Floor);
@@ -102,7 +101,7 @@ Bus.on('clickDevice', (isParent) => {
 // 系统树点击
 Bus.on('clickApplication', (isParent) => {
     // Todo
-    if (!isParent) {
+    if(!isParent) {
         xiaof();
     }
    
@@ -216,7 +215,7 @@ const isSelent = (obj) => {
 }
 
 let selectedObjects = ref([]);
-let selectBoxByClick, selectBoxByMouseon, pointLabel, selectedObject;
+let selectBoxByClick, selectBoxByMouseon, pointLabel;
 var marginLeft = 0;
 var marginTop = 70;
 // 鼠标移动效果
@@ -228,7 +227,7 @@ const onMouseMove = (event) => {
     const intersects = raycaster.intersectObjects(scene.children, true);
     if (intersects.length > 0) {
         const clickedObject = intersects[0].object;
-        selectedObject = isSelent(clickedObject);
+        var selectedObject = isSelent(clickedObject);
         if (selectedObject) {
             selectedObjects[0] = selectedObject;
             if (selectBoxByMouseon) {
@@ -252,8 +251,9 @@ const onMouseDownRight = (event) => {
     if (intersects.length > 0) {
         const clickedObject = intersects[0].object;
         console.log('这是我选中的模型', clickedObject);
-        selectedObject = isSelent(clickedObject);
+        var selectedObject = isSelent(clickedObject);
-        addLabel(selectedObject, true);
+        // addLabel(selectedObject, true);
+        emit('handleRightClick', selectedObject);
     }
 }
 // 鼠标点击效果
@@ -269,7 +269,7 @@ const onMouseDown = (event) => {
     if (intersects.length > 0) {
         clickedObject = intersects[0].object;
         console.log('这是我选中的模型', clickedObject);
-        selectedObject = isSelent(clickedObject);
+        var selectedObject = isSelent(clickedObject);
         // 高亮所在区域
         boxLight(selectedObject);
         // 染色点击的模型
@@ -279,7 +279,7 @@ const onMouseDown = (event) => {
             Bus.emit('handleTreeClick', clickedObject);
             return;
         }
-        if (bimStore().activateIndex == '1') {
+        if(bimStore().activateIndex == '1') {
             // 联动左侧菜单
             Bus.emit('handleTreeClick1', clickedObject);
             return;
@@ -417,8 +417,10 @@ const toHomeView = () => {
         scene.remove(selectBoxByClick);
     }
     // 清除标签
+    if(!isAddLabel.value) {
         removeLabel();
-    isAddLabel.value = true;
+        isAddLabel.value = !isAddLabel.value;
+    }
     // 清除精灵图
     controls.reset();
 }
@@ -448,43 +450,35 @@ const setLabel = () => {
     isAddLabel.value = !isAddLabel.value;
 }
 // 添加标签
-const addLabel = (obj, isShowDetail) => {
+const addLabel = (obj,isShowDetail) => {
-    removeLabel();
     // console.log(123, obj);
     centerSelectedGroup(obj);
     let text = "设备二";
-    pointLabel = createLableObj(text, isShowDetail);
+    pointLabel = createLableObj(text,isShowDetail);
     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, isShowDetail) => {
+const createLableObj = (text,isShowDetail) => {
     let laberDiv = document.createElement("div"); //创建div容器
-    if (!isShowDetail) {
+    if(!isShowDetail) {
         laberDiv.className = "laber_name";
         laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
     } else {
-        laberDiv.style.pointerEvents = 'auto';// 必须加
         laberDiv.className = "laber_name1";
-        laberDiv.innerHTML = `<div class="detail-btn">详情</div>`;
+        laberDiv.innerHTML = `<div class="detail-btn">详情</div>`
-        laberDiv.addEventListener('click', function (event) {
-            emit('handleRightClick', selectedObject);
-            console.log(labelRenderer.domElement);
-        })
     }
     let pointLabel = new CSS2DObject(laberDiv);
     return pointLabel;
 };
 const removeLabel = () => {
-    if(pointLabel) {
+    document.body.removeChild(labelRenderer.domElement);
-        pointLabel.visible = false;
-    }
-    // document.body.removeChild(labelRenderer.domElement);
    
 }
 
@@ -502,18 +496,18 @@ const setBottom = () => {
 
 // 消防
 const xiaof = () => {
-    xfobj.forEach((o) => {
+    xfobj.forEach((o)=>{
-        xfadd(o, Math.random() < 0.3);
+        xfadd(o,Math.random() < 0.3);
     })
 }
 let xfobj = [];
 // 消防标签
-const xfadd = (obj, state) => {
+const xfadd = (obj,state)=> {
-    const texLoader = new THREE.TextureLoader();
+    const texLoader= new THREE.TextureLoader();
     let texture = null;
-    if (state) {
+    if(state){
-        texture = texLoader.load("/ygr.png");
+        texture= texLoader.load("/ygr.png");
-    } else {
+    }else{
         texture = texLoader.load("/yg.png");
     }
     const spriteMaterial = new THREE.SpriteMaterial({
@@ -572,9 +566,8 @@ const xfadd = (obj, state) => {
         line-height: 24px;
     }
 }
-
 .laber_name1 {
-    width: 100px;
+    width:100px;
     height: 50px;
     border-radius: 5px;
     cursor: pointer;
@@ -583,6 +576,6 @@ const xfadd = (obj, state) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 999;
+    z-index:999;
 }
 </style>