Update ThreeView2.vue

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

@@ -12,9 +12,9 @@
             <div class="button" @click="setBottom()">
                 {{ isRemoveBottom ? '移除地板' : '恢复地板' }}
             </div>
-            <div class="button" @click="roam()">
+            <!-- <div class="button" @click="roam()">
                 漫游
-            </div>
+            </div> -->
         </div>
     </div>
 </template>
@@ -219,7 +219,7 @@ const onMouseDownRight = (event) => {
         const clickedObject = intersects[0].object;
         console.log('这是我选中的模型', clickedObject);
         var selectedObject = isSelent(clickedObject);
-        // addLabel(selectedObject);
+        // addLabel(selectedObject, true);
         emit('handleRightClick', selectedObject);
     }
 }
@@ -403,18 +403,18 @@ const nearCamera = (floor) => {
 const setLabel = () => {
     if (isAddLabel.value) {
             let obj = scene.getObjectByName('set2');
-            addLabel(obj);
+            addLabel(obj, false);
     } else {
         removeLabel();
     }
     isAddLabel.value = !isAddLabel.value;
 }
 // 添加标签
-const addLabel = (obj) => {
+const addLabel = (obj,isShowDetail) => {
     // console.log(123, obj);
     centerSelectedGroup(obj);
     let text = "设备二";
-    pointLabel = createLableObj(text);
+    pointLabel = createLableObj(text,isShowDetail);
     obj.add(pointLabel);
     labelRenderer.setSize(window.innerWidth, window.innerHeight);
     labelRenderer.domElement.style.position = "absolute";
@@ -425,10 +425,15 @@ const addLabel = (obj) => {
     // 将呈现器的输出添加到HTML元素
     document.getElementById("dom").appendChild(renderer.domElement);
 };
-const createLableObj = (text) => {
+const createLableObj = (text,isShowDetail) => {
     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>`
+    if(!isShowDetail) {
+        laberDiv.className = "laber_name";
+        laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
+    } else {
+        laberDiv.className = "laber_name1";
+        laberDiv.innerHTML = `<div class="detail-btn">详情</div>`
+    }
     let pointLabel = new CSS2DObject(laberDiv);
     return pointLabel;
 };
@@ -521,4 +526,16 @@ const xfadd = (obj,state)=> {
         line-height: 24px;
     }
 }
+.laber_name1 {
+    width:100px;
+    height: 50px;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #00174b;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index:999;
+}
 </style>