feat: 点云数据修改

src/views/dashboard/components/PointModal.vue

@@ -34,274 +34,430 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-// 定义全局变量
+// 状态管理
-let scene;
+const pcdContainer = ref(null);
-let renderer;
+const show = computed({
+  get() { return props.value; },
+  set(val) { emit("update:value", val); }
+});
 
-// 新增加载状态和进度
+// Three.js核心对象
+const scene = ref(null);
+const camera = ref(null);
+const renderer = ref(null);
+const controls = ref(null);
+const pointCloud = ref(null);
+
+// 状态变量
+const pcdLoaded = ref(false);
 const loading = ref(false);
-const progress = ref(0);
+const errorMessage = ref("");
-// 处理对话框关闭事件
+const topView = ref(true); // 默认使用俯视图
-const handleClose = () => {
+
-    if (pcdContainer.value) {
+// 渲染循环ID
-        // 移除渲染器的 DOM 元素
+let animationId = null;
-        while (pcdContainer.value.firstChild) {
+
-            pcdContainer.value.removeChild(pcdContainer.value.firstChild);
+// 视图状态保存
-        }
+let initialCameraPosition = null;
-        // 释放场景资源
+let initialCameraRotation = null;
-        if (scene) {
+let initialControlsTarget = null;
-            scene.traverse((object) => {
+let initialCameraZoom = 1;
-                if (object instanceof THREE.Mesh) {
+let pointCloudCenter = new THREE.Vector3(); // 点云中心位置
-                    object.geometry.dispose();
+let pointCloudSize = new THREE.Vector3();   // 点云尺寸
-                    if (object.material instanceof THREE.Material) {
+let normalViewPosition = null;  // 普通视图相机位置
-                        object.material.dispose();
+let normalViewRotation = null;  // 普通视图相机旋转
-                    } else {
+
-                        object.material.forEach((material) => material.dispose());
+// 窗口大小调整处理
-                    }
+const handleResize = () => {
-                }
+  if (camera.value && renderer.value && pcdContainer.value) {
-            });
+    const container = pcdContainer.value;
-        }
+    camera.value.aspect = container.clientWidth / container.clientHeight;
-        // 销毁控制器
+    camera.value.updateProjectionMatrix();
-        if (controls) {
+    renderer.value.setSize(container.clientWidth, container.clientHeight);
-            controls.dispose();
+  }
-        }
-        // 移除窗口大小变化监听器
-        // window.removeEventListener('resize', onWindowResize);
-        // 重置变量
-        scene = null;
-        camera = null;
-        renderer = null;
-        controls = null;
-        pcdLoaded.value = false;
-    }
-    emit("update:value", false);
 };
 
-const show = computed({
+// 处理点云加载和渲染
-    get() {
+const loadPointCloud = (url) => {
-        return props.value;
+  // 重置状态
+  errorMessage.value = "";
+  loading.value = true;
+  
+  // 清除现有点云
+  if (pointCloud.value && scene.value) {
+    scene.value.remove(pointCloud.value);
+    pointCloud.value.geometry.dispose();
+    pointCloud.value.material.dispose();
+    pointCloud.value = null;
+  }
+
+  const loader = new PCDLoader();
+  loader.load(
+    url,
+    (parsedPointCloud) => {
+      console.log("PCD解析成功，点数:", parsedPointCloud.geometry.attributes.position.count);
+      processPointCloud(parsedPointCloud);
     },
-    set(val: boolean) {
+    (xhr) => {
-        emit("update:value", val);
+      const percent = Math.round((xhr.loaded / xhr.total) * 100);
+      console.log(`加载进度: ${percent}%`);
+    },
+    (error) => {
+      console.error("点云加载失败:", error);
+      errorMessage.value = "点云文件加载失败";
+      loading.value = false;
     }
-});
+  );
-const pcdContainer = ref(null);
+};
-let initialCameraPosition;
-let initialCameraRotation;
-let initialControlsTarget;
-let initialCameraZoom;
-let controls;
-let camera;
-const pcdLoaded = ref(false);
 
-const onDialogOpened = () => {
+// 处理解析后的点云数据
-    // 检查点云数据URL是否存在
+const processPointCloud = (parsedPointCloud) => {
-    if (!props.info.point_cloud_url) {
+  // 保存点云对象
-        return;
+  pointCloud.value = markRaw(parsedPointCloud);
-    }
+  
-    if (pcdContainer.value) {
+  // 计算点云边界和尺寸
-        scene = new THREE.Scene();
+  const box = new THREE.Box3().setFromObject(pointCloud.value);
-        camera = new THREE.PerspectiveCamera(
+  box.getCenter(pointCloudCenter);
-            75,
+  box.getSize(pointCloudSize);
-            pcdContainer.value.clientWidth / pcdContainer.value.clientHeight,
+  
-            0.1,
+  const maxDim = Math.max(pointCloudSize.x, pointCloudSize.y, pointCloudSize.z);
-            1000
+  
-        );
+  // 调整点云位置使其居中
-        renderer = new THREE.WebGLRenderer();
+  pointCloud.value.position.sub(pointCloudCenter);
-        renderer.setSize(pcdContainer.value.clientWidth, pcdContainer.value.clientHeight);
+  
-        pcdContainer.value.appendChild(renderer.domElement);
+  // 应用颜色渐变
-
+  applyColorGradient(pointCloud.value, maxDim);
-        // 创建 OrbitControls 实例
+  
-        controls = new OrbitControls(camera, renderer.domElement);
+  // 添加到场景
-
+  scene.value.add(pointCloud.value);
-        const loader = new PCDLoader();
+  
-        // 开始加载，设置加载状态为 true
+  // 计算相机距离和位置
-        loading.value = true;
+  const fov = camera.value.fov * (Math.PI / 180);
-        loader.load(
+  const distance = maxDim / 2 / Math.tan(fov / 2);
-            props.info.point_cloud_url,
+  
-            function (pointCloud) {
+  // 保存普通视角的相机位置和旋转
-                // 加载完成，设置加载状态为 false
+  normalViewPosition = new THREE.Vector3(0, distance, 0);
-                loading.value = false;
+  normalViewRotation = new THREE.Euler(0, 0, 0);
-                // 调整点云的位置到原点
+
-                pointCloud.position.set(0, 100, 0);
+  // 设置相机位置为俯视图
-
+  setTopView(distance);
-                // 获取点云的几何体
+
-                const geometry = pointCloud.geometry;
+  // 保存初始状态
-
+  initialCameraPosition = camera.value.position.clone();
-                // 创建颜色数组
+  initialCameraRotation = camera.value.rotation.clone();
-                const colors = [];
+  initialCameraZoom = camera.value.zoom;
-                const positions = geometry.attributes.position.array;
+  initialControlsTarget = controls.value.target.clone();
-                const numPoints = positions.length / 3;
+
-
+  // 更新状态
-                // 定义起始颜色和结束颜色
+  pcdLoaded.value = true;
-                const startColor = new THREE.Color(0x0000ff); // 蓝色
+  loading.value = false;
-                const midColor1 = new THREE.Color(0x00ff00);  // 绿色
+
-                const midColor2 = new THREE.Color(0xffff00);  // 黄色
+  // 触发重绘
-                const endColor = new THREE.Color(0xff0000);   // 红色
+  controls.value.update();
-
+};
-                // 计算点云在 z 轴上的最小值和最大值
+
-                let minZ = Infinity;
+// 设置俯视图
-                let maxZ = -Infinity;
+const setTopView = (distance) => {
-                for (let i = 0; i < numPoints; i++) {
+  if (!camera.value || !controls.value) return;
-                    const z = positions[i * 3 + 2];
+
-                    if (z < minZ) minZ = z;
+  // 设置相机位置为正上方
-                    if (z > maxZ) maxZ = z;
+  camera.value.position.set(0, 0, distance);
-                }
+  // 设置相机朝向为向下 (沿Z轴负方向)
-
+  camera.value.lookAt(0, 0, 0);
-                for (let i = 0; i < numPoints; i++) {
+
-                    const z = positions[i * 3 + 2];
+  // 锁定控制器只能绕Z轴旋转 (水平旋转)
-                    // 计算颜色渐变因子
+  controls.value.minPolarAngle = Math.PI / 2;
-                    const factor = (z - minZ) / (maxZ - minZ);
+  controls.value.maxPolarAngle = Math.PI / 2;
-
+
-                    let color;
+  topView.value = true;
-                    if (factor < 0.33) {
+};
-                        // 从蓝到绿的渐变
-                        const subFactor = factor / 0.33;
-                        color = startColor.clone().lerp(midColor1, subFactor);
-                    } else if (factor < 0.66) {
-                        // 从绿到黄的渐变
-                        const subFactor = (factor - 0.33) / 0.33;
-                        color = midColor1.clone().lerp(midColor2, subFactor);
-                    } else {
-                        // 从黄到红的渐变
-                        const subFactor = (factor - 0.66) / 0.34;
-                        color = midColor2.clone().lerp(endColor, subFactor);
-                    }
-
-                    // 将颜色添加到颜色数组中
-                    colors.push(color.r, color.g, color.b);
-                }
-                // 创建颜色属性
-                const colorAttribute = new THREE.Float32BufferAttribute(colors, 3);
-                geometry.setAttribute('color', colorAttribute);
-
-                // 创建一个新的材质并启用顶点颜色
-                const material = new THREE.PointsMaterial({ vertexColors: true });
-                pointCloud.material = material;
-
-                // 调整点云的缩放比例
-                pointCloud.scale.set(1, 1, 1);
-                // 计算点云的边界框
-                const box = new THREE.Box3().setFromObject(pointCloud);
-                const size = box.getSize(new THREE.Vector3());
-                const maxSize = Math.max(size.x, size.y, size.z);
-                const fov = camera.fov * (Math.PI / -180);
-                const distance = maxSize / 2 / Math.tan(fov / 3);
-
-                // 调整相机位置为正视图
-                camera.position.set(0, distance, 0);
-                camera.rotation.set(0, 0, 0);
-                camera.lookAt(0, 0, 0);
-
-                // 调整点云的旋转角度，绕 y 轴旋转 45 度（Math.PI / 4 弧度）
-                pointCloud.rotation.set(0, 0, 0);
-
-                // 保存初始相机位置、旋转、缩放和控制器目标位置
-                initialCameraPosition = camera.position.clone();
-                initialCameraRotation = camera.rotation.clone();
-                initialCameraZoom = camera.zoom;
-                initialControlsTarget = controls.target.clone();
-
-                scene.add(pointCloud);
-                pcdLoaded.value = true;
-
-                // // 监听窗口大小变化
-                // const onWindowResize = () => {
-                //     camera.aspect = pcdContainer.value.clientWidth / pcdContainer.value.clientHeight;
-                //     camera.updateProjectionMatrix();
-                //     renderer.setSize(pcdContainer.value.clientWidth, pcdContainer.value.clientHeight);
-                // };
-                // window.addEventListener('resize', onWindowResize);
-            },
-            function (xhr) {
-                // 更新加载进度
-                progress.value = (xhr.loaded / xhr.total) * 100;
-            },
-            function (error) {
-                // 加载失败，设置加载状态为 false
-                loading.value = false;
-                console.error('点云文件加载失败:', error);
-            }
-        );
-
-        function animate() {
-            requestAnimationFrame(animate);
-            // 更新控制器
-            if (controls) {
-                controls.update();
-            }
-            if (renderer && scene && camera) {
-                renderer.render(scene, camera);
-            }
-        }
 
-        animate();
+// 切换俯视图和普通视图
+const toggleTopView = () => {
+  if (!pcdLoaded.value) return;
+
+  if (topView.value) {
+    // 切换到普通视图
+    camera.value.position.copy(normalViewPosition);
+    camera.value.rotation.copy(normalViewRotation);
+
+    // 解锁控制器
+    controls.value.minPolarAngle = 0;
+    controls.value.maxPolarAngle = Math.PI;
+
+    topView.value = false;
+  } else {
+    // 切换到俯视图
+    const fov = camera.value.fov * (Math.PI / 180);
+    const distance = Math.max(pointCloudSize.x, pointCloudSize.y, pointCloudSize.z) / 2 / Math.tan(fov / 2);
+    setTopView(distance);
+  }
+
+  controls.value.update();
+};
+
+// 应用颜色渐变
+const applyColorGradient = (pointCloud, maxDim) => {
+  const geometry = pointCloud.geometry;
+
+  // 检查点云是否已经有颜色
+  if (geometry.attributes.color) {
+    console.log("点云已有颜色信息，使用顶点颜色");
+    pointCloud.material = new THREE.PointsMaterial({
+      vertexColors: true,
+      size: maxDim * 0.0001,  // 使用与参考代码相同的点大小计算方式
+      sizeAttenuation: true
+    });
+    return;
+  }
+
+  console.log("点云没有颜色信息，应用颜色渐变");
+
+  // 创建颜色数组
+  const colors = [];
+  const positions = geometry.attributes.position.array;
+  const numPoints = positions.length / 3;
+
+  // 定义起始颜色和结束颜色（与参考代码一致）
+  const startColor = new THREE.Color(0x0000ff); // 蓝色
+  const midColor1 = new THREE.Color(0x00ff00); // 绿色
+  const midColor2 = new THREE.Color(0xffff00); // 黄色
+  const endColor = new THREE.Color(0xff0000);  // 红色
+
+  // 计算点云在 z 轴上的最小值和最大值
+  let minZ = Infinity;
+  let maxZ = -Infinity;
+  for (let i = 0; i < numPoints; i++) {
+    const z = positions[i * 3 + 2];
+    if (z < minZ) minZ = z;
+    if (z > maxZ) maxZ = z;
+  }
+
+  // 应用四色渐变（与参考代码一致）
+  for (let i = 0; i < numPoints; i++) {
+    const z = positions[i * 3 + 2];
+    // 计算颜色渐变因子
+    const factor = (z - minZ) / (maxZ - minZ);
+
+    let color;
+    if (factor < 0.33) {
+      // 从蓝到绿的渐变
+      const subFactor = factor / 0.33;
+      color = startColor.clone().lerp(midColor1, subFactor);
+    } else if (factor < 0.66) {
+      // 从绿到黄的渐变
+      const subFactor = (factor - 0.33) / 0.33;
+      color = midColor1.clone().lerp(midColor2, subFactor);
     } else {
-        console.error('pcdContainer is null');
+      // 从黄到红的渐变
+      const subFactor = (factor - 0.66) / 0.34;
+      color = midColor2.clone().lerp(endColor, subFactor);
     }
+
+    // 将颜色添加到颜色数组中
+    colors.push(color.r, color.g, color.b);
+  }
+
+  // 创建颜色属性
+  const colorAttribute = new THREE.Float32BufferAttribute(colors, 3);
+  geometry.setAttribute("color", colorAttribute);
+
+  // 创建材质（与参考代码一致）
+  pointCloud.material = new THREE.PointsMaterial({
+    vertexColors: true,
+    size: maxDim * 0.005,
+    sizeAttenuation: true
+  });
 };
 
-const zoomIn = () => {
+// 初始化场景
-    if (camera) {
+const initScene = () => {
-        camera.position.multiplyScalar(0.9);
+  // 重置保存的状态
-        camera.updateProjectionMatrix();
+  initialCameraPosition = null;
-        if (controls) {
+  initialCameraRotation = null;
-            controls.update();
+  initialControlsTarget = null;
-        }
+  initialCameraZoom = 1;
+  pointCloudCenter = new THREE.Vector3();
+  pointCloudSize = new THREE.Vector3();
+
+  // 创建场景
+  scene.value = markRaw(new THREE.Scene());
+  scene.value.background = new THREE.Color(0x000000);
+
+  // 创建相机（与参考代码一致的参数）
+  const container = pcdContainer.value;
+  camera.value = markRaw(
+    new THREE.PerspectiveCamera(
+      75,
+      container.clientWidth / container.clientHeight,
+      0.1,
+      1000
+    )
+  );
+
+  // 创建渲染器
+  renderer.value = markRaw(new THREE.WebGLRenderer({ antialias: true }));
+  renderer.value.setSize(container.clientWidth, container.clientHeight);
+  container.appendChild(renderer.value.domElement);
+
+  // 添加轨道控制器
+  controls.value = markRaw(
+    new OrbitControls(camera.value, renderer.value.domElement)
+  );
+  controls.value.enableDamping = true;
+  controls.value.dampingFactor = 0.05;
+
+  // 添加环境光
+  const ambientLight = markRaw(new THREE.AmbientLight(0xffffff, 0.5));
+  scene.value.add(ambientLight);
+
+  // 添加方向光
+  const directionalLight = markRaw(new THREE.DirectionalLight(0xffffff, 0.8));
+  directionalLight.position.set(0, 0, 1); // 从上方照射
+  scene.value.add(directionalLight);
+
+  // 启动动画循环
+  const animate = () => {
+    if (scene.value && camera.value && renderer.value && controls.value) {
+      controls.value.update();
+      renderer.value.render(scene.value, camera.value);
     }
+    animationId = requestAnimationFrame(animate);
+  };
+  animationId = requestAnimationFrame(animate);
+
+  // 监听窗口大小变化
+  window.addEventListener("resize", handleResize);
 };
 
-const zoomOut = () => {
+// 关闭对话框前重置视图
-    if (camera) {
+const resetViewBeforeClose = () => {
-        camera.position.multiplyScalar(1.1);
+  if (controls.value && camera.value && initialCameraPosition && pcdLoaded.value) {
-        camera.updateProjectionMatrix();
+    // 重置相机到初始状态
-        if (controls) {
+    camera.value.position.copy(initialCameraPosition);
-            controls.update();
+    camera.value.rotation.copy(initialCameraRotation);
-        }
+    camera.value.zoom = initialCameraZoom;
+    camera.value.updateProjectionMatrix();
+    
+    controls.value.target.copy(initialControlsTarget);
+    controls.value.update();
+    
+    // 强制渲染一帧
+    if (scene.value && renderer.value) {
+      renderer.value.render(scene.value, camera.value);
     }
+  }
 };
 
-const returnToCenter = () => {
+// 关闭对话框清理资源
-    if (initialCameraPosition && initialCameraRotation && initialControlsTarget && camera && controls) {
+const handleClose = () => {
-        // 重置控制器的临时状态
+  // 关闭前重置视图
-        controls.reset();
+  resetViewBeforeClose();
-
+  
-        // 恢复相机位置
+  // 取消动画循环
-        camera.position.copy(initialCameraPosition);
+  if (animationId) {
-        // 恢复相机旋转角度
+    cancelAnimationFrame(animationId);
-        camera.rotation.copy(initialCameraRotation);
+    animationId = null;
-        // 恢复相机缩放
+  }
-        camera.zoom = initialCameraZoom;
+  
-
+  // 移除渲染器
-        // 多次更新投影矩阵和控制器
+  if (pcdContainer.value && renderer.value) {
-        for (let i = 0; i < 3; i++) {
+    pcdContainer.value.removeChild(renderer.value.domElement);
-            camera.updateProjectionMatrix();
+  }
-            if (controls) {
+
-                controls.update();
+  // 释放资源
-            }
+  if (scene.value) {
+    scene.value.traverse((obj) => {
+      if (obj instanceof THREE.Mesh || obj instanceof THREE.Points) {
+        obj.geometry.dispose();
+        if (obj.material instanceof THREE.Material) {
+          obj.material.dispose();
+        } else {
+          obj.material.forEach(m => m.dispose());
         }
+      }
+    });
+  }
+
+  // 销毁控制器
+  if (controls.value) {
+    controls.value.dispose();
+    controls.value = null;
+  }
+
+  // 重置状态
+  scene.value = null;
+  camera.value = null;
+  renderer.value = null;
+  pointCloud.value = null;
+  pcdLoaded.value = false;
+  loading.value = false;
+  
+  // 移除事件监听
+  window.removeEventListener("resize", handleResize);
+  
+  // 通知父组件关闭
+  emit("update:value", false);
+};
 
-        // 恢复控制器目标位置
+// 对话框打开时初始化
-        controls.target.copy(initialControlsTarget);
+const onDialogOpened = () => {
+  if (!props.info.point_cloud_url) {
+    errorMessage.value = "没有点云数据URL";
+    return;
+  }
+  
+  // 初始化场景
+  initScene();
+  
+  // 加载点云
+  loadPointCloud(props.info.point_cloud_url);
+};
 
-        // 重置控制器的所有状态
+// 相机控制函数
-        controls.target0.copy(initialControlsTarget);
+const zoomIn = () => {
-        controls.position0.copy(initialCameraPosition);
+  if (camera.value) {
-        controls.zoom0 = initialCameraZoom;
+    camera.value.position.multiplyScalar(0.9); // 与参考代码相同的缩放因子
+    camera.value.updateProjectionMatrix();
+    controls.value.update();
+  }
+};
 
-        // 延迟更新控制器
+const zoomOut = () => {
-        setTimeout(() => {
+  if (camera.value) {
-            if (controls) {
+    camera.value.position.multiplyScalar(1.1); // 与参考代码相同的缩放因子
-                controls.update();
+    camera.value.updateProjectionMatrix();
-            }
+    controls.value.update();
-        }, 100);
+  }
-    } else {
-        console.error("Initial state is not defined");
-    }
 };
+
+// 回到中心功能（简化版本，直接设置而不是动画）
+const returnToCenter = () => {
+  if (initialCameraPosition && initialCameraRotation && initialControlsTarget) {
+    camera.value.position.copy(initialCameraPosition);
+    camera.value.rotation.copy(initialCameraRotation);
+    camera.value.zoom = initialCameraZoom;
+    camera.value.updateProjectionMatrix();
+
+    controls.value.target.copy(initialControlsTarget);
+    controls.value.update();
+  }
+};
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 确保动画循环已取消
+  if (animationId) {
+    cancelAnimationFrame(animationId);
+    animationId = null;
+  }
+  
+  window.removeEventListener("resize", handleResize);
+});
 </script>
 
 <style lang="scss">
+/* 样式保持不变 */
 .pointModal-wrap.el-dialog {
     box-sizing: border-box;
     width: 1600px;
@@ -311,10 +467,12 @@ const returnToCenter = () => {
     background-position: center;
     background-repeat: no-repeat;
     background-color: #000;
+    
     .pcd-container {
         position: relative;
         width: 1560px;
         height: 760px;
+        
         .button-first,
         .button-second,
         .button-thrid {
@@ -322,35 +480,30 @@ const returnToCenter = () => {
             width: 24px;
             height: 24px;
             cursor: pointer;
-            background-image: url("@/assets/common/amplify_btn.png");
             background-size: 100% 100%;
             background-position: center;
             background-repeat: no-repeat;
             bottom: 112px;
             right: 32px;
-            /* 添加过渡效果 */
             transition: all 0.3s ease;
         }
+        
+        .button-first {
+            background-image: url("@/assets/common/amplify_btn.png");
+        }
+        
         .button-second {
             bottom: 72px;
             right: 32px;
             background-image: url("@/assets/common/reduce_btn.png");
-            background-size: 100% 100%;
-            background-position: center;
-            background-repeat: no-repeat;
-            /* 添加过渡效果 */
-            transition: all 0.3s ease;
         }
+        
         .button-thrid {
             bottom: 33px;
             right: 32px;
             background-image: url("@/assets/common/reset_btn.png");
-            background-size: 100% 100%;
-            background-position: center;
-            background-repeat: no-repeat;
-            /* 添加过渡效果 */
-            transition: all 0.3s ease;
         }
+        
         .progress-bar {
             position: absolute;
             bottom: 20px;
@@ -362,6 +515,7 @@ const returnToCenter = () => {
             border-radius: 10px;
             overflow: hidden;
         }
+        
         .progress {
             height: 100%;
             background-color: #007bff;