123

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

@@ -247,28 +247,31 @@ const enableGroup = [
     'tanghua_room',
     'touliao_room',
 ]
-// const onMouseDown = (event) => {
+const onMouseMove = (event) => {
-//     // 计算鼠标点击位置的归一化设备坐标
+    var raycaster = new THREE.Raycaster()
-//     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    // 计算鼠标点击位置的归一化设备坐标
-//     mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 
-//     var raycaster = new THREE.Raycaster()
+    // 更新射线的起点和方向
-//     cleanColor();
+    raycaster.setFromCamera(mouse, camera);
-//     // 更新射线的起点和方向
+    // 计算射线和场景中所有可点击物体的相交情况
-//     raycaster.setFromCamera(mouse, camera);
+    const intersects = raycaster.intersectObjects(scene.children, true);
-//     // 计算射线和场景中所有可点击物体的相交情况
+    // 如果找到了模型，将其材质修改为绿色
-//     const intersects = raycaster.intersectObjects(scene.children, true);
+    if (intersects.length > 0) {
-//     // 如果找到了模型，将其材质修改为绿色
+        const clickedObject = intersects[0].object;
-//     if (intersects.length > 0) {
+        // 储存被选中的模型和材质
-//         const clickedObject = intersects[0].object;
+        selectedObject = clickedObject;
-//         // 储存被选中的模型和材质
+        if (enableGroup.indexOf(selectedObject.name) != -1) {
-//         selectedObject = clickedObject;
+            outlineObj([selectedObject])
-//         // // 修改材质为绿色
+            // nearCamera(intersects);
-//         selectedObject.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+        }
-//         nearCamera(intersects);
+        if (enableGroup.indexOf(selectedObject.parent.name) != -1) {
-//     }
+            outlineObj([selectedObject.parent])
-
+            // nearCamera(intersects);
-// }
+        }
+    }
+}
 const onMouseDown = (event) => {
     var raycaster = new THREE.Raycaster()
     // 计算鼠标点击位置的归一化设备坐标
@@ -283,13 +286,18 @@ const onMouseDown = (event) => {
     if (intersects.length > 0) {
         const clickedObject = intersects[0].object;
         // 储存被选中的模型和材质
-        selectedObject = clickedObject.parent;
+        selectedObject = clickedObject;
         if (enableGroup.indexOf(selectedObject.name) != -1) {
             outlineObj([selectedObject])
+            alert("点击了",selectedObject.name)
+            // nearCamera(intersects);
+        }
+        if (enableGroup.indexOf(selectedObject.parent.name) != -1) {
+            outlineObj([selectedObject.parent])
+            alert("点击了",selectedObject.parent.name)
             // nearCamera(intersects);
         }
     }
-
 }
 
 let composer = null

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

@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <div id="gltf"></div>
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import * as THREE from 'three';
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
+import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
+import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
+
+onMounted(() => {
+    init();
+    loadSence();
+    renderScene();
+    document.addEventListener("click", onMouseDown);
+    // document.addEventListener("mousemove", onMouseMove);
+});
+let scene, renderer, camera;
+const init = () => {
+    // 场景
+    scene = new THREE.Scene();
+    // 相机
+    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
+    // camera.position.z = 5;
+    camera.position.set(-46.650, 67.456, 38.088);
+    //渲染器
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.outputEncoding = THREE.sRGBEncoding;
+    document.getElementById('gltf').appendChild(renderer.domElement);
+
+    const controls = new OrbitControls(camera, renderer.domElement);
+    const pmremGenerator = new THREE.PMREMGenerator(renderer);
+    scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
+}
+const loadSence = () => {
+    const gltfLoader = new GLTFLoader();
+    gltfLoader.load('/jzc/scene.gltf', (gltf) => {
+        var model = gltf.scene;
+        scene.add(model);
+    });
+};
+const renderScene = () => {
+    requestAnimationFrame(renderScene);
+    renderer.render(scene, camera);
+};
+
+// 能选中的组
+const enableGroup = [
+    'set1',
+    'set2',
+    'set3',
+    'set4',
+    'set5',
+    'set6',
+    'set7',
+    'set8',
+    'yuanliao_room',
+    'tanghua_room',
+    'touliao_room',
+]
+let mouse = new THREE.Vector2();
+let selectedObjects = ref([]);
+let selectBoxByClick, selectBoxByMouseon;
+// 鼠标移动效果
+const onMouseMove = (event) => {
+    var raycaster = new THREE.Raycaster()
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
+    const intersects = raycaster.intersectObjects(scene.children, true);
+    if (intersects.length > 0) {
+        const clickedObject = intersects[0].object;
+        var selectedObject = clickedObject;
+        if (enableGroup.indexOf(selectedObject.name) != -1) {
+            selectedObjects[0] = selectedObject
+        }
+        if (enableGroup.indexOf(selectedObject.parent.name) != -1) {
+            selectedObjects[0] = selectedObject.parent
+        }
+        if (selectBoxByMouseon) {
+            scene.remove(selectBoxByMouseon);
+        }
+        selectBoxByMouseon = new THREE.BoxHelper(selectedObjects[0], '#ffffff');
+        scene.add(selectBoxByMouseon);
+    }
+}
+// 鼠标点击效果
+const onMouseDown = (event) => {
+    var raycaster = new THREE.Raycaster()
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
+    const intersects = raycaster.intersectObjects(scene.children, true);
+    if (intersects.length > 0) {
+        const clickedObject = intersects[0].object;
+        var selectedObject = clickedObject;
+        console.log(selectedObject);
+        if (enableGroup.indexOf(selectedObject.name) != -1) {
+            selectedObjects[0] = selectedObject
+        }
+        if (enableGroup.indexOf(selectedObject.parent.name) != -1) {
+            selectedObjects[0] = selectedObject.parent
+        }
+        if (selectBoxByClick) {
+            scene.remove(selectBoxByClick);
+        }
+        selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff');
+        scene.add(selectBoxByClick);
+    }
+}
+</script>
+<style scoped></style>

src/views/bim/bimHome/index.vue

@@ -48,7 +48,7 @@ import DeviceEvent from './components/DeviceEvent.vue';
 import ApplicationTree from './components/ApplicationTree.vue';
 import EquipmentInfo from './components/EquipmentInfo.vue';
 import RealData from './components/RealData.vue';
-import ThreeView from './components/ThreeView.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';

vite.config.js

@@ -25,7 +25,7 @@ export default defineConfig(({ mode, command }) => {
     },
     // vite 相关配置
     server: {
-      port: 80,
+      port: 8080,
       host: true,
       open: true,
       proxy: {