如何将点云顶点颜色转移至网格并在Three.js中正确渲染？

• Draco压缩丢失顶点颜色：Draco压缩默认可能忽略COLOR_0这类顶点属性，若导出/压缩时未明确指定保留，颜色信息会被直接丢弃。
• 点云转网格工具未传递颜色：多数重建工具（如Poisson、Marching Cubes）默认只生成几何拓扑结构，不会自动将点云的顶点颜色映射到网格顶点上。
• Three.js渲染配置错误：Points材质默认不启用顶点颜色读取，若未设置vertexColors: true，会强制使用单一颜色渲染。

• Three.js控制台检查：加载模型后，在开发者工具控制台执行以下代码：

  mesh.geometry.attributes.forEach((attr, key) => console.log(key, attr.count));
  

  若输出包含color且数量与position属性一致，说明顶点颜色存在。
• Blender验证：导入GLB模型，切换到编辑模式，打开「属性编辑器-顶点数据-顶点颜色」，查看是否有颜色层数据。
• glTF结构检查：用glTF-Transform工具执行命令查看模型属性：

  gltf-transform inspect input.glb
  

  在输出的meshes[*].primitives[*].attributes中查找COLOR_0字段。

1. 确保点云转网格时保留顶点颜色 #

• 若使用Blender：导入点云后完成网格重建（如「重构网格」工具），通过「顶点颜色-从顶点属性复制」功能，将点云的颜色属性转移到网格顶点。
• 若使用Open3D：调用重建函数时指定保留顶点颜色：

  mesh = o3d.geometry.TriangleMesh.create_from_point_cloud_poisson(pcd, vertex_color=True)[0]
  

2. 正确导出带Draco压缩的GLB #

• Blender导出：在GLB导出设置中，勾选「几何-顶点颜色」，启用Draco压缩后，确保压缩选项未排除COLOR_0属性。
• 用glTF-Transform修复现有模型：

  gltf-transform draco input.glb output.glb --keep COLOR_0
  

3. Three.js渲染配置修正 #

• 启用材质的顶点颜色读取：

  const pointsMaterial = new THREE.PointsMaterial({
    vertexColors: true,
    size: 0.1 // 根据需求调整点大小
  });
  const points = new THREE.Points(mesh.geometry, pointsMaterial);
  

• 若加载后几何无color属性，可手动关联原始点云颜色（需保证网格与点云顶点有对应逻辑，比如最近邻插值）：

  // 假设pointCloud是原始点云对象，mesh是转换后的网格
  const colorAttr = new THREE.ColorAttribute(pointCloud.geometry.attributes.color.array, 3);
  mesh.geometry.setAttribute('color', colorAttr);
  

内容的提问来源于stack exchange，提问作者Radim Holub