修改了选中效果

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';