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

@@ -37,12 +37,10 @@ onMounted(() => {
     init();
     loadSence();
     renderScene();
-    //点击模型
+    document.addEventListener("click", onMouseDown);
-    document.addEventListener('click', onMouseDown);
     // document.addEventListener("mousemove", onMouseMove);
 });
 let scene, renderer, camera, controls, pointsArr = true;
-let biggerSphereMesh = null;
 let i = 1;
 let mouse = new THREE.Vector2();
 let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
@@ -65,7 +63,6 @@ Bus.on('clickBuild', (isParent) => {
 
         // 拉近场景
         // nearCamera(Floor);
-
         boxLight(Floor);
         return;
     }
@@ -119,7 +116,7 @@ const loadSence = () => {
     const dracoLoader = new DRACOLoader();
     dracoLoader.setDecoderPath('/draco/gltf/')//设置解压库文件路径
     gltfLoader.setDRACOLoader(dracoLoader)
-    gltfLoader.load('/jzc/scene3.gltf', (gltf) => {
+    gltfLoader.load('/jzc/scene2.gltf', (gltf) => {
         var model = gltf.scene;
         // console.log(roamdObjects);
         roamdObjects = model.children[0].children;
@@ -203,36 +200,19 @@ const onMouseMove = (event) => {
 }
 // 鼠标点击效果
 const onMouseDown = (event) => {
-    var vector = new THREE.Vector3();//三维坐标对象
+    var raycaster = new THREE.Raycaster()
-    vector.set(
+    mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
-        (event.clientX / window.innerWidth) * 2 - 1,
+    mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1;
-        - (event.clientY / window.innerHeight) * 2 + 1,
+    raycaster.setFromCamera(mouse, camera);
-        0.5);
+    const intersects = raycaster.intersectObjects(scene.children, true);
-    vector.unproject(camera);
+
-    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
-    var intersects = raycaster.intersectObjects(scene.children);
     if (intersects.length > 0) {
-        var selected = intersects[0];//取第一个物体
+        const clickedObject = intersects[0].object;
-        console.log("x坐标:" + selected.point.x);
+        var selectedObject = isSelent(clickedObject);
-        console.log("y坐标:" + selected.point.y);
+        console.log(123, selectedObject);
-        console.log("z坐标:" + selected.point.z);
+        boxLight(selectedObject);
+        // nearCamera(selectedObject)
     }
-
-
-    // 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);
-    // console.log(123, event);
-
-    // if (intersects.length > 0) {
-    //     const clickedObject = intersects[0].object;
-    //     console.log('这是我选中的模型', clickedObject);
-    //     var selectedObject = isSelent(clickedObject);
-    //     // 高亮所在区域
-    //     boxLight(selectedObject);
-    // }
 }
 
 const boxLight = (selectedObject) => {
@@ -277,75 +257,47 @@ const centerSelectedGroup = (obj) => {
 
 // 漫游
 const roam = () => {
+    //漫游
+    controls.enableDamping = false; // 启用惯性
+    controls.dampingFactor = 0.05; // 惯性阻尼，应该介于 0 到 1 之间。 default = 0.25
+    controls.screenSpacePanning = false; // 默认的屏幕空间行为。当它控制在真正的三维空间中时使用屏幕空间拖动。default = false
+    controls.minDistance = 100;
+    controls.maxDistance = 200;
+    controls.maxPolarAngle = Math.PI / 2; // 限制atorbit控制操作（禁止摄像机下凹）
+    // 启用飞行模式，默认轨道
+    controls.enablePan = false; // 禁用拖拽pan
+    controls.enableKeys = true;
+    controls.keyPanSpeed = 30; // 默认值 7，每按一次 WSAD 键的速度像素量
+    controls.enableZoom = false; // 禁用滚轮缩放
+    controls.keyRotateSpeed = 90; // 默认值：30，每按一次Q和E的旋转度数
+    controls.spaceingFactor = 0.4; //默认值：0.4，每按一次上下左右的速度像素量
+    
     //漫游坐标
     const path = new THREE.CatmullRomCurve3([
-        new THREE.Vector3(130.076658411178222, 58.489999368786826, -32.514521795452985), // 起始坐标
+        new THREE.Vector3(-50, 20, 90), // 起始坐标
-        new THREE.Vector3(128.938067229663826, 55.0220540878815, 30.184599697589874) //中间节点
+        new THREE.Vector3(-10, 40, 40), //中间节点
+        new THREE.Vector3(0, 0, 0),  // 中间节点
+        new THREE.Vector3(60, -60, 0), //中间节点
+        new THREE.Vector3(90, -40, 60), //中间节点
+        new THREE.Vector3(120, 30, 30), //终点
+        // //起点
+        // new THREE.Vector3(-10, 0, 10),
+        // //中间节点
+        // new THREE.Vector3(-5,10,-10),
+        // new THREE.Vector3(2, 5, -5),
+        // //终点
+        // new THREE.Vector3(10, 0, 10),
     ]);
-
+    pointsArr = path.getSpacedPoints(500);
-
+    // console.log(pointsArr);
-    d(path)
+    i = 100;
-    pointsArr = path.getSpacedPoints(50);
-
-
-    i = 0;
-    console.log(pointsArr[i]);
     // 设置相机起点， 相机位置：曲线上当前点pointsArr[i]
     camera.position.copy(pointsArr[i]);
     // 相机观察目标：当前点的下一个点pointsArr[i + 1]
     camera.lookAt(pointsArr[i + 1]);
-    // controls.target.copy(pointsArr[i+1])
+    renders();
-
-    setTimeout(() => {
-        renders();
-    }, 1000);
 }
-function d(cameraCurve) {
+let num = 0;
-    let sphereCurve = null;
-    //参考路径上取100个点，每个点上添加蓝色小球
-    //做一个小0.6倍的路径添加到场景，作相机运动路径参考
-    sphereCurve = cameraCurve.clone()
-    sphereCurve.points.forEach(point => {
-        point.x *= 0.6
-        point.y *= 0.2
-        point.z *= 0.6
-        return point
-    })
-
-    //参考路径上取100个点，每个点上添加蓝色小球
-    const pathPoints = sphereCurve.getPoints(100)
-    pathPoints.forEach(point => {
-        const sphere = new THREE.SphereGeometry(0.2)
-        const sphereMaterial = new THREE.MeshBasicMaterial({
-            color: 0x0000ff
-        })
-        const sphereMesh = new THREE.Mesh(sphere, sphereMaterial)
-        sphereMesh.position.set(point.x, point.y, point.z)
-        scene.add(sphereMesh)
-    })
-
-    //绘制一条红色的路径参考线
-    const geometry = new THREE.BufferGeometry().setFromPoints(pathPoints)
-    const material = new THREE.LineBasicMaterial({
-        color: 0xff0000
-    })
-    const curveObject = new THREE.Line(geometry, material)
-    scene.add(curveObject)
-
-    //做一个较大的绿色小球沿相机相反反向移动
-    const biggerSphere = new THREE.SphereGeometry(2)
-    const sphereMaterial1 = new THREE.MeshBasicMaterial({ color: 0x0ff00 })
-    biggerSphereMesh = new THREE.Mesh(biggerSphere, sphereMaterial1)
-    biggerSphereMesh.position.set(
-        pathPoints[0].x,
-        pathPoints[0].y,
-        pathPoints[0].z
-    )
-    scene.add(biggerSphereMesh)
-
-
-}
-let num = 1;
 const renders = () => {
     /*     angle += 0.01;
     // 相机y坐标不变，在XOZ平面上做圆周运动
@@ -354,21 +306,14 @@ const renders = () => {
     if (num < pointsArr.length - 1) {
         // 相机位置设置在当前点位置
         camera.position.copy(pointsArr[num]);
-        //   camera.position.set(pointsArr[num]);
         // 曲线上当前点pointsArr[num]和下一个点pointsArr[num+1]近似模拟当前点曲线切线
         // 设置相机观察点为当前点的下一个点，相机视线和当前点曲线切线重合
         camera.lookAt(pointsArr[num + 1]);
-        biggerSphereMesh.position.copy(pointsArr[num]
-        )
-
-        // controls.target.copy(pointsArr[num+1])
         num += 1; //调节速度
-        requestAnimationFrame(renders);
-        controls.update();
     } else {
         num = 0
     }
-
+    requestAnimationFrame(renders);
 };
 
 let roamdObjects = ref([]);
@@ -482,6 +427,30 @@ const setBottom = () => {
     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;
     }