ThreeJS中追加点合并PCD点云时如何保留两文件原有RGB值

核心逻辑很直接：PCD的点数据和RGB属性是按索引一一绑定的，合并时只要把两份文件的坐标数组、颜色数组按原顺序完整拼接，不做覆盖、不打乱索引，就能100%保留所有点的原有颜色，不会出现红色点变蓝、蓝色点丢失的问题。 #

实现步骤 #

1. 加载源PCD文件 #

用ThreeJS官方扩展的PCDLoader加载两个待合并的文件，加载时不要修改默认的顶点颜色解析规则，避免颜色值被篡改。

import { PCDLoader } from 'three/addons/loaders/PCDLoader.js';
import { BufferGeometry, Points, PointsMaterial } from 'three';

const loader = new PCDLoader();
// 加载两个带RGB信息的源文件
const [pcd1, pcd2] = await Promise.all([
  loader.loadAsync('./file1.pcd'),
  loader.loadAsync('./file2.pcd')
]);

加载完成后可以先打印两个点云的geometry.attributes，确认存在position（顶点坐标）和color（顶点RGB值）两个属性，避免源文件本身缺颜色字段。

2. 按顺序拼接坐标与颜色数组 #

注意：坐标数组和颜色数组必须按点的对应关系同步拼接，偏移量要完全匹配，否则会出现点和颜色错位的问题

// 提取两个点云的原始类型化数组
const posArr1 = pcd1.geometry.attributes.position.array;
const colorArr1 = pcd1.geometry.attributes.color.array;
const posArr2 = pcd2.geometry.attributes.position.array;
const colorArr2 = pcd2.geometry.attributes.color.array;

// 初始化合并后的数组，总长度为两份数组长度之和
const mergedPos = new Float32Array(posArr1.length + posArr2.length);
const mergedColor = new Float32Array(colorArr1.length + colorArr2.length);

// 先写入第一个PCD的全部数据
mergedPos.set(posArr1, 0);
mergedColor.set(colorArr1, 0);
// 从第一个数组的结束位置开始，写入第二个PCD的全部数据
mergedPos.set(posArr2, posArr1.length);
mergedColor.set(colorArr2, colorArr1.length);

这一步完成后，file1里所有RGB为(1,0,0)的红点、file2里所有RGB为(0,0,1)的蓝点，颜色值会跟着自己的坐标一起存在新数组里，不会被覆盖或修改。

3. 生成合并点云并导出PCD #

把拼接好的数组封装成新的点云对象，注意材质必须开启顶点颜色配置，否则渲染时会用统一材质色覆盖原有RGB。导出直接用PCDLoader自带的导出方法即可，不需要额外写解析逻辑。

// 构建合并后的几何体
const mergedGeometry = new BufferGeometry();
mergedGeometry.setAttribute('position', new THREE.BufferAttribute(mergedPos, 3));
mergedGeometry.setAttribute('color', new THREE.BufferAttribute(mergedColor, 3));

// 生成可渲染的合并点云对象
const mergedPointCloud = new Points(
  mergedGeometry,
  new PointsMaterial({
    size: 0.01, // 按自己的点大小需求调整
    vertexColors: true // 必须开启，否则顶点色不生效
  })
);

// 导出为PCD文件触发下载
const pcdBlob = loader.pcdExport(mergedPointCloud);
const downloadUrl = URL.createObjectURL(pcdBlob);
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = 'merged.pcd';
downloadLink.click();
URL.revokeObjectURL(downloadUrl);

避坑提示 #

• 合并全程不要给点云材质设置固定的color属性值，否则会把所有顶点的颜色覆盖成材质色
• 如果你的PCD颜色是0-255范围的Uint8格式，两个数组要保持同数据类型、同数值范围再拼接，不要单独对某一个数组做归一化，否则会出现偏色
• 如果两个PCD的空间坐标系原点不一致，拼接前可以先给其中一个点云做坐标平移变换，变换时不要动color属性数组即可

内容的提问来源于stack exchange，提问作者Ashutosh Sharma