漫游失败

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

@@ -1,14 +1,7 @@
 <template>
     <div>
         <div id="gltf"></div>
-        <div id="dom"></div>
         <div class="btnGroup">
-            <div class="button" @click="toHomeView">
-                主视角
-            </div>
-            <div class="button" @click="setLabel">
-                {{ isAddLabel ? '添加标签' : '移除标签' }}
-            </div>
             <div class="button" @click="walk">
                 漫游
             </div>
@@ -21,13 +14,8 @@ 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 {
+import TWEEN from "@tweenjs/tween.js";
-    CSS2DObject,
+
-    CSS2DRenderer,
-} from "three/examples/jsm/renderers/CSS2DRenderer";
-import Bus from '@/utils/bus.js'
-import bimStore from '@/store/modules/bim';
-import gsap from "gsap";
 onMounted(() => {
     init();
     loadSence();
@@ -35,47 +23,14 @@ onMounted(() => {
     document.addEventListener("click", onMouseDown);
     // document.addEventListener("mousemove", onMouseMove);
 });
-let scene, renderer, camera, orbit, isAddLabel = true;
+let scene, renderer, camera, controls;
-let mouse = new THREE.Vector2();
-let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
-
-// 建筑树点击
-Bus.on('clickBuild', (isParent) => {
-    // Todo
-    console.log('clickBuild', isParent);
-    if (!isParent) {// 点击子级
-        var clickName = bimStore().activateTree.clickName;
-        var Floor = scene.getObjectByName(clickName);
-        // 拉近场景
-        nearCamera(Floor);
-        return;
-    }
-})
-// 设备树点击
-Bus.on('clickDevice', (isParent) => {
-    if (!isParent) {// 点击子级
-        var clickName = bimStore().activateDevice.clickName;
-        var Floor = scene.getObjectByName(clickName);
-        // 拉近距离
-        nearCamera(Floor);
-        return;
-    }
-})
-
-// 系统树点击
-Bus.on('clickApplication', e => {
-    // Todo
-    console.log('clickApplication');
-})
-
 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(-66.650, 0, 80.088);
+    camera.position.set(-46.650, 67.456, 38.088);
- 
     //渲染器
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setPixelRatio(window.devicePixelRatio);
@@ -83,8 +38,7 @@ const init = () => {
     renderer.outputEncoding = THREE.sRGBEncoding;
     document.getElementById('gltf').appendChild(renderer.domElement);
 
-    orbit = new OrbitControls(camera, renderer.domElement);
+    controls = new OrbitControls(camera, renderer.domElement);
-
     const pmremGenerator = new THREE.PMREMGenerator(renderer);
     scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
 }
@@ -92,12 +46,23 @@ const loadSence = () => {
     const gltfLoader = new GLTFLoader();
     gltfLoader.load('/jzc/scene.gltf', (gltf) => {
         var model = gltf.scene;
+        // console.log(roamdObjects);
+        roamdObjects = model.children[0].children;
+        // console.log(model.children[0].children);
         scene.add(model);
     });
 };
 const renderScene = () => {
     requestAnimationFrame(renderScene);
+    TWEEN.update();
+    controls.update();
     renderer.render(scene, camera);
+    // if (roamdObjects.length > 0) {
+    //     const currentModel = roamdObjects.shift();
+    //     setTimeout(() => {
+    //         roam(currentModel);
+    //     }, 3000);
+    // }
 };
 
 // 能选中的组
@@ -128,15 +93,36 @@ const isSelent = (obj) => {
         }
     }
 }
-// 鼠标点击效果
+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 - 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 = isSelent(clickedObject);
+        if (selectedObject) {
+            selectedObjects[0] = selectedObject;
+            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-marginLeft) / window.innerWidth) * 2 - 1;
+    mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
-    mouse.y = -((event.clientY-marginTop) / window.innerHeight) * 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) {
@@ -150,68 +136,63 @@ const onMouseDown = (event) => {
             }
             selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff');
             scene.add(selectBoxByClick);
+            centerSelectedGroup(selectedObject);
         }
     }
 }
-// 返回初始值
+// 居中显示选中
-const toHomeView = () => {
+const centerSelectedGroup = (obj) => {
-    orbit.reset();
+    let tween = new TWEEN.Tween(controls.target).to(obj.position, 1000).easing(TWEEN.Easing.Quadratic.Out);
-}
+    controls.enabled = false;
-// 拉近距离
+    tween.onComplete(function () {
-const nearCamera = (floor) => {
+        controls.enabled = true;
-    orbit.reset();
-    gsap.to(camera.position, {
-        x: floor.position.x,
-        y: floor.position.y,
-        z: floor.position.z,
-        duration: 2,
-        ease: "power1.inOut",
-        onComplete: () => {
-        },
     });
-    
+    tween.start();
-}
-//标签
-const setLabel = () => {
-    if(isAddLabel) {
-        addLabel();
-    } else {
-        removeLabel();
-    }
-    isAddLabel = !isAddLabel;
-}
-// 添加标签
-const addLabel = () => {
-    let obj = scene.getObjectByName('set2');
-    console.log(123, obj);
-    let text = "设备二";
-    let pointLabel = createLableObj(text);
-    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) => {
+
-    let laberDiv = document.createElement("div"); //创建div容器
+
-    laberDiv.className = "laber_name";
+    // let distance = 100
-    laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
+    // let angel = Math.PI / 5
-    let pointLabel = new CSS2DObject(laberDiv);
+
-    return pointLabel;
+    // let position = {
-};
+    //     x: targetPosition.x + Math.sin(angel) * distance,
-const removeLabel = () => {
+    //     // y: targetPosition.y,
-    document.body.removeChild(labelRenderer.domElement);
+    //     y: targetPosition.y + Math.sin(angel) * distance,
+    //     z: targetPosition.z + Math.sin(angel) * distance,
+    // }
+
+    // let tween = new TWEEN.Tween(camera.position).to(position, 3000)
+    // let tween1 = new TWEEN.Tween(controls.target).to(targetPosition, 1000)
+
+
+    // // tween.start()
+    // tween1.start()
+
+}
+// 漫游
+const roam = (obj) => {
+    // 添加选中效果
+    if (selectBoxByClick) {
+        scene.remove(selectBoxByClick);
+    }
+    selectBoxByClick = new THREE.BoxHelper(obj, '#00ffff');
+    scene.add(selectBoxByClick);
+    // 移动到中心
+    let tween = new TWEEN.Tween(controls.target).to(obj.position, 1000).easing(TWEEN.Easing.Quadratic.Out);
+    // controls.enabled = false;
+    // tween.onComplete(function () {
+    //     controls.enabled = true;
+    // });
+    tween.start();
+}
+let roamdObjects = ref([]);
+const walk = () => {
 }
 </script>
-<style lang='scss'>
+<style scoped>
-#gltf {
-    height: 100%;
-    width: 100%;
-}
 .btnGroup {
     width: 180px;
     position: absolute;
@@ -234,44 +215,4 @@ const removeLabel = () => {
         margin-top: 10px;
     }
 }
-.laber_name {
-    width: 120px;
-    height: 90px;
-    padding: 5px 10px;
-    white-space: nowrap;
-    background-color: #ffffffb3;
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-    font-size: 12px;
-    display: flex;
-    flex-direction: column;
-
-    &::before {
-        // content: "";
-        // display: inline-block;
-        // width: 0;
-        // height: 0;
-        // border: 12px solid transparent;
-        // border-right-color: #ffffffb3;
-        // position: absolute;
-        // left: -23px;
-        // top: 0;
-    }
-
-    .arrow_outer {
-        // position: absolute;
-        // left: -22px;
-        // top: 6px;
-        // margin: 0;
-        // width: 12px;
-        // height: 12px;
-        // background-color: #eb6852;
-        // border-radius: 100%;
-        // border: 1px solid #fff;
-    }
-
-    span {
-        line-height: 24px;
-    }
-}
 </style>