diff --git a/src/views/bim/bimHome/components/ThreeView2.vue b/src/views/bim/bimHome/components/ThreeView2.vue index b6279ac..c4db109 100644 --- a/src/views/bim/bimHome/components/ThreeView2.vue +++ b/src/views/bim/bimHome/components/ThreeView2.vue @@ -10,12 +10,6 @@ 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(); @@ -68,54 +62,64 @@ const enableGroup = [ 'tanghua_room', 'touliao_room', ] +const isSelent = (obj) => { + var o = obj + while (true) { + if (o.name != "jzgltf" && enableGroup.indexOf(o.name) != -1) { + return o; + } else { + if (o.parent.name == "jzgltf") { + return null; + } else { + o = o.parent; + } + } + } +} let mouse = new THREE.Vector2(); let selectedObjects = ref([]); let selectBoxByClick, selectBoxByMouseon; +var marginLeft = 0; +var marginTop = 70; // 鼠标移动效果 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-marginLeft) / window.innerWidth) * 2 - 1; + mouse.y = -((event.clientY-marginTop) / 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 + var selectedObject = isSelent(clickedObject); + if (selectedObject) { + selectedObjects[0] = selectedObject; + if (selectBoxByMouseon) { + scene.remove(selectBoxByMouseon); + } + selectBoxByMouseon = new THREE.BoxHelper(selectedObjects[0], '#ffffff'); + scene.add(selectBoxByMouseon); } - 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; + mouse.x = ((event.clientX-marginLeft) / window.innerWidth) * 2 - 1; + mouse.y = -((event.clientY-marginTop) / 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; + var selectedObject = isSelent(clickedObject); console.log(selectedObject); - if (enableGroup.indexOf(selectedObject.name) != -1) { - selectedObjects[0] = selectedObject + if (selectedObject) { + selectedObjects[0] = selectedObject; + if (selectBoxByClick) { + scene.remove(selectBoxByClick); + } + selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff'); + scene.add(selectBoxByClick); } - 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); } }