Merge branch 'main' of https://git.shikicc.com/wangqiujuan0808/bw

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

@@ -37,10 +37,12 @@ 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
@@ -63,6 +65,7 @@ Bus.on('clickBuild', (isParent) => {
 
         // 拉近场景
         // nearCamera(Floor);
+
         boxLight(Floor);
         return;
     }
@@ -96,10 +99,8 @@ const init = () => {
     scene = new THREE.Scene();
     scene.background = new THREE.Color(bimStore().activateMenu.background);
     // 相机
-    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); 
-    // camera.position.z = 5;  
+    camera.position.set(-92.650, 67.456, 38.088); 
-    camera.position.set(-92.650, 67.456, 38.088);
-    // camera.position.set(-92.936, 180.990, -28.179);
     //渲染器
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setPixelRatio(window.devicePixelRatio);
@@ -116,11 +117,9 @@ const loadSence = () => {
     const dracoLoader = new DRACOLoader();
     dracoLoader.setDecoderPath('/draco/gltf/')//设置解压库文件路径
     gltfLoader.setDRACOLoader(dracoLoader)
-    gltfLoader.load('/jzc/scene2.gltf', (gltf) => {
+    gltfLoader.load('/jzc/scene3.gltf', (gltf) => {
-        var model = gltf.scene;
+        var model = gltf.scene; 
-        // console.log(roamdObjects);
+        roamdObjects = model.children[0].children; 
-        roamdObjects = model.children[0].children;
-        // console.log(model.children[0].children);
         scene.add(model);
     });
 };
@@ -130,12 +129,6 @@ const renderScene = () => {
     controls.update();
     renderer.render(scene, camera);
     labelRenderer.render(scene, camera);
-    // if (roamdObjects.length > 0) {
-    //     const currentModel = roamdObjects.shift();
-    //     setTimeout(() => {
-    //         roam(currentModel);
-    //     }, 3000);
-    // }
 };
 
 const onWindowResize = () => {
@@ -205,13 +198,14 @@ const onMouseDown = (event) => {
     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);
-        console.log(123, selectedObject);
+        // 高亮所在区域
         boxLight(selectedObject);
-        // nearCamera(selectedObject)
     }
 }
 
@@ -234,70 +228,79 @@ const centerSelectedGroup = (obj) => {
         controls.enabled = true;
     });
     tween.start();
-
-
-    // let distance = 100
-    // let angel = Math.PI / 5
-
-    // let position = {
-    //     x: targetPosition.x + Math.sin(angel) * distance,
-    //     // y: targetPosition.y,
-    //     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 = () => {
-    //漫游
-    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(-50, 20, 90), // 起始坐标
+        new THREE.Vector3(130.076658411178222, 58.489999368786826, -32.514521795452985), // 起始坐标
-        new THREE.Vector3(-10, 40, 40), //中间节点
+        new THREE.Vector3(128.938067229663826, 55.0220540878815, 30.184599697589874) //中间节点
-        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);
+
-    i = 100;
+    d(path)
+    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]);
-    renders();
+    // controls.target.copy(pointsArr[i+1])
+
+    setTimeout(() => {
+        renders();
+    }, 1000);
 }
-let num = 0;
+const d = (cameraCurve) => {
+    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平面上做圆周运动
@@ -306,14 +309,21 @@ 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([]);
@@ -428,30 +438,6 @@ 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;
     }

src/views/components/Line.vue

@@ -38,8 +38,8 @@ const getCharts = () => {
             },
             grid: {
                 top: '24%',
-                left: '5%',
+                left: '2%',
-                right: '8%',
+                right: '2%',
                 // bottom: '2%',
                 height: '80%',
                 containLabel: true