From 269bf60bc880b2a4e9379664122c2568549479f6 Mon Sep 17 00:00:00 2001 From: wangqiujuan0808 <578331299@qq.com> Date: Mon, 11 Dec 2023 09:19:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layoutMain/components/Navbar.vue | 2 +- .../bim/bimHome/components/ThreeView2.vue | 36 ++++++++++++------- src/views/bim/bimHome/index.vue | 1 - src/views/index.vue | 2 +- 4 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/layoutMain/components/Navbar.vue b/src/layoutMain/components/Navbar.vue index dfcae6f..83d760c 100644 --- a/src/layoutMain/components/Navbar.vue +++ b/src/layoutMain/components/Navbar.vue @@ -168,7 +168,7 @@ function setLayout() { // background: #202a60; display: flex; justify-content: space-between; - background: url('@/assets/images/top_banner_deep.png') no-repeat #202a60; + background: url('@/assets/images/top_banner_deep.png') no-repeat #000000; .left { width: 33%; diff --git a/src/views/bim/bimHome/components/ThreeView2.vue b/src/views/bim/bimHome/components/ThreeView2.vue index 8ac06e9..e4d859e 100644 --- a/src/views/bim/bimHome/components/ThreeView2.vue +++ b/src/views/bim/bimHome/components/ThreeView2.vue @@ -36,9 +36,13 @@ onMounted(() => { document.addEventListener("click", onMouseDown); // document.addEventListener("mousemove", onMouseMove); }); -let scene, renderer, camera, controls, isAddLabel = true; +let scene, renderer, camera, controls = true; let mouse = new THREE.Vector2(); let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer +const data = reactive({ + isAddLabel: true +}); +const { isAddLabel } = toRefs(data); // 建筑树点击 Bus.on('clickBuild', (isParent) => { // Todo @@ -48,7 +52,7 @@ Bus.on('clickBuild', (isParent) => { var Floor = scene.getObjectByName(clickName); // 拉近场景 // nearCamera(Floor); - centerSelectedGroup(Floor); + boxLight(Floor); return; } }) @@ -57,8 +61,9 @@ Bus.on('clickDevice', (isParent) => { if (!isParent) {// 点击子级 var clickName = bimStore().activateDevice.clickName; var Floor = scene.getObjectByName(clickName); + boxLight(Floor); // 拉近距离 - nearCamera(Floor); + // nearCamera(Floor); return; } }) @@ -74,7 +79,8 @@ const init = () => { // 相机 camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); // camera.position.z = 5; - camera.position.set(-20.650, 5.456, 30.088); + camera.position.set(-92.650, 67.456, 38.088); + // camera.position.set(-92.936, 180.990, -28.179); //渲染器 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); @@ -101,6 +107,7 @@ const renderScene = () => { TWEEN.update(); controls.update(); renderer.render(scene, camera); + labelRenderer.render(scene, camera); // if (roamdObjects.length > 0) { // const currentModel = roamdObjects.shift(); // setTimeout(() => { @@ -173,7 +180,12 @@ const onMouseDown = (event) => { const clickedObject = intersects[0].object; var selectedObject = isSelent(clickedObject); console.log(selectedObject); - if (selectedObject) { + boxLight(selectedObject); + } +} + +const boxLight = (selectedObject) => { + if (selectedObject) { selectedObjects[0] = selectedObject; if (selectBoxByClick) { scene.remove(selectBoxByClick); @@ -182,7 +194,6 @@ const onMouseDown = (event) => { scene.add(selectBoxByClick); centerSelectedGroup(selectedObject); } - } } // 居中显示选中 const centerSelectedGroup = (obj) => { @@ -249,17 +260,19 @@ const nearCamera = (floor) => { } //标签 const setLabel = () => { - if(isAddLabel) { + if(isAddLabel.value) { addLabel(); } else { removeLabel(); + toHomeView(); } - isAddLabel = !isAddLabel; + isAddLabel.value = !isAddLabel.value; } // 添加标签 const addLabel = () => { let obj = scene.getObjectByName('set2'); - console.log(123, obj); + // console.log(123, obj); + centerSelectedGroup(obj); let text = "设备二"; let pointLabel = createLableObj(text); obj.add(pointLabel); @@ -298,10 +311,10 @@ const removeLabel = () => { display: flex; flex-direction: column; justify-content: space-between; - cursor: pointer; color: #ffff; >div { + cursor: pointer; background: #477efa; width: 120px; height: 40px; @@ -317,8 +330,7 @@ const removeLabel = () => { padding: 5px 10px; white-space: nowrap; background-color: #ffffffb3; - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; + border-radius: 12px; font-size: 12px; display: flex; flex-direction: column; diff --git a/src/views/bim/bimHome/index.vue b/src/views/bim/bimHome/index.vue index acef075..848236b 100644 --- a/src/views/bim/bimHome/index.vue +++ b/src/views/bim/bimHome/index.vue @@ -49,7 +49,6 @@ import ApplicationTree from './components/ApplicationTree.vue'; import EquipmentInfo from './components/EquipmentInfo.vue'; import RealData from './components/RealData.vue'; import ThreeView from './components/ThreeView2.vue'; -// import ThreeModel from './components/ThreeModel.vue'; import DeviceInfoDialog from './components/DeviceInfoDialog.vue'; import RealInfoDialog from './components/RealInfoDialog.vue'; import DeviceDetial from './components/DeviceDetial.vue'; diff --git a/src/views/index.vue b/src/views/index.vue index 282e990..5c159ab 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -67,7 +67,7 @@ const gotoPage = (item) => { .home-page { width:100%; height: calc(100vh - 150px); - background: #020c45; + background: #000000; position: relative; .map-div { width: 100%;