From babcf2d5a2980156d2ea7d8474fef2dd18fb902d Mon Sep 17 00:00:00 2001 From: wangqiujuan0808 <578331299@qq.com> Date: Fri, 15 Dec 2023 20:09:13 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bim/bimHome/components/ThreeView2.vue | 79 ++++++++++--------- 1 file changed, 43 insertions(+), 36 deletions(-) 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 = `
详情
` + laberDiv.innerHTML = `
详情
`; + laberDiv.addEventListener('click', function (event) { + emit('handleRightClick', selectedObject); + console.log(labelRenderer.domElement); + }) } let pointLabel = new CSS2DObject(laberDiv); return pointLabel; }; const removeLabel = () => { - document.body.removeChild(labelRenderer.domElement); - + if(pointLabel) { + pointLabel.visible = false; + } + // document.body.removeChild(labelRenderer.domElement); + } // 设置地板 @@ -456,18 +462,18 @@ const setBottom = () => { // 消防 const xiaof = () => { - xfobj.forEach((o)=>{ - xfadd(o,Math.random() < 0.3); + xfobj.forEach((o) => { + xfadd(o, Math.random() < 0.3); }) } let xfobj = []; // 消防标签 -const xfadd = (obj,state)=> { - const texLoader= new THREE.TextureLoader(); +const xfadd = (obj, state) => { + const texLoader = new THREE.TextureLoader(); let texture = null; - if(state){ - texture= texLoader.load("/ygr.png"); - }else{ + if (state) { + texture = texLoader.load("/ygr.png"); + } else { texture = texLoader.load("/yg.png"); } const spriteMaterial = new THREE.SpriteMaterial({ @@ -526,8 +532,9 @@ const xfadd = (obj,state)=> { line-height: 24px; } } + .laber_name1 { - width:100px; + width: 100px; height: 50px; border-radius: 5px; cursor: pointer; @@ -536,6 +543,6 @@ const xfadd = (obj,state)=> { display: flex; align-items: center; justify-content: center; - z-index:999; + z-index: 999; } \ No newline at end of file