diff --git a/src/views/bim/bimHome/components/ThreeView2.vue b/src/views/bim/bimHome/components/ThreeView2.vue index 4a3cb71..5c1aae1 100644 --- a/src/views/bim/bimHome/components/ThreeView2.vue +++ b/src/views/bim/bimHome/components/ThreeView2.vue @@ -81,6 +81,7 @@ Bus.on('clickDevice', (isParent) => { if (!isParent) {// 点击子级 var clickName = bimStore().activateDevice.clickName; var Floor = scene.getObjectByName(clickName); + removeLabel(); boxLight(Floor); // 拉近距离 // nearCamera(Floor); @@ -91,10 +92,10 @@ Bus.on('clickDevice', (isParent) => { // 系统树点击 Bus.on('clickApplication', (isParent) => { // Todo - if(!isParent) { + if (!isParent) { xiaof(); } - + }) watch(() => bimStore().activateMenu, value => { @@ -129,8 +130,8 @@ const loadSence = () => { gltfLoader.load('/jzc/scene.gltf', (gltf) => { var model = gltf.scene; roamdObjects = model.children[0].children; - model.traverse((obj)=>{ - if (enableGroup.indexOf(obj.name) != -1){ + model.traverse((obj) => { + if (enableGroup.indexOf(obj.name) != -1) { xfobj.push(obj); } }); @@ -182,7 +183,7 @@ const isSelent = (obj) => { } let selectedObjects = ref([]); -let selectBoxByClick, selectBoxByMouseon, pointLabel; +let selectBoxByClick, selectBoxByMouseon, pointLabel, selectedObject; var marginLeft = 0; var marginTop = 70; // 鼠标移动效果 @@ -194,7 +195,7 @@ const onMouseMove = (event) => { const intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { const clickedObject = intersects[0].object; - var selectedObject = isSelent(clickedObject); + selectedObject = isSelent(clickedObject); if (selectedObject) { selectedObjects[0] = selectedObject; if (selectBoxByMouseon) { @@ -218,9 +219,8 @@ const onMouseDownRight = (event) => { if (intersects.length > 0) { const clickedObject = intersects[0].object; console.log('这是我选中的模型', clickedObject); - var selectedObject = isSelent(clickedObject); - // addLabel(selectedObject, true); - emit('handleRightClick', selectedObject); + selectedObject = isSelent(clickedObject); + addLabel(selectedObject, true); } } // 鼠标点击效果 @@ -235,20 +235,20 @@ const onMouseDown = (event) => { if (intersects.length > 0) { const clickedObject = intersects[0].object; console.log('这是我选中的模型', clickedObject); - var selectedObject = isSelent(clickedObject); + selectedObject = isSelent(clickedObject); // 高亮所在区域 boxLight(selectedObject); - if(bimStore().activateIndex == '0') { + if (bimStore().activateIndex == '0') { // 联动左侧菜单 Bus.emit('handleTreeClick', clickedObject); return; } - if(bimStore().activateIndex == '1') { + if (bimStore().activateIndex == '1') { // 联动左侧菜单 Bus.emit('handleTreeClick1', clickedObject); return; } - + } } @@ -377,10 +377,8 @@ const toHomeView = () => { scene.remove(selectBoxByClick); } // 清除标签 - if(!isAddLabel.value) { - removeLabel(); - isAddLabel.value = !isAddLabel.value; - } + removeLabel(); + isAddLabel.value = true; // 清除精灵图 controls.reset(); } @@ -402,44 +400,52 @@ const nearCamera = (floor) => { //标签 const setLabel = () => { if (isAddLabel.value) { - let obj = scene.getObjectByName('set2'); - addLabel(obj, false); + let obj = scene.getObjectByName('set2'); + addLabel(obj, false); } else { removeLabel(); } 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 = `
设备名称:${text}状态:启用压力:50 Pa` } else { + laberDiv.style.pointerEvents = 'auto';// 必须加 laberDiv.className = "laber_name1"; - laberDiv.innerHTML = `