123

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

@@ -34,10 +34,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
@@ -59,6 +61,7 @@ Bus.on('clickBuild', (isParent) => {
 
         // 拉近场景
         // nearCamera(Floor);
+
         boxLight(Floor);
         return;
     }
@@ -105,7 +108,7 @@ 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;
         // console.log(roamdObjects);
         roamdObjects = model.children[0].children;
@@ -189,19 +192,36 @@ const onMouseMove = (event) => {
 }
 // 鼠标点击效果
 const onMouseDown = (event) => {
-    var raycaster = new THREE.Raycaster()
+    var vector = new THREE.Vector3();//三维坐标对象
-    mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
+    vector.set(
-    mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1;
+        (event.clientX / window.innerWidth) * 2 - 1,
-    raycaster.setFromCamera(mouse, camera);
+        - (event.clientY / window.innerHeight) * 2 + 1,
-    const intersects = raycaster.intersectObjects(scene.children, true);
+        0.5);
-
+    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) {
-        const clickedObject = intersects[0].object;
+        var selected = intersects[0];//取第一个物体
-        var selectedObject = isSelent(clickedObject);
+        console.log("x坐标:" + selected.point.x);
-        console.log(123, selectedObject);
+        console.log("y坐标:" + selected.point.y);
-        boxLight(selectedObject);
+        console.log("z坐标:" + selected.point.z);
-        // 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) => {
@@ -246,47 +266,75 @@ 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(-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;
+function 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平面上做圆周运动
@@ -295,14 +343,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([]);
@@ -404,30 +459,6 @@ const removeLabel = () => {
     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;
     }