Three.js：合并BufferGeometries时如何保留各几何体的自定义位置与颜色

合并显示异常的核心原因 #

你当前合并失败的问题，大概率是因为baseGeometry自带索引（index）属性：每个克隆后的小几何体保留了原几何体的索引结构，但你替换了position属性后，索引对应的顶点数量和范围已经不匹配。合并多个带索引的几何体时，索引会叠加导致超出合并后的顶点总数，最终渲染错乱。

优化方案（保留自定义位置与颜色+提升性能） #

方案1：修复合并逻辑，避免索引冲突

修改几何体创建代码，移除克隆几何体的索引，或直接创建空的BufferGeometry：

// 方式1：直接创建空BufferGeometry，仅添加需要的属性
const newGeometry = new BufferGeometry();
// 过滤空数据，避免无效几何体
if (geometryPositions.length > 0 && geometryColors.length > 0) {
  newGeometry.setAttribute(
    'position',
    new Float32BufferAttribute(geometryPositions, 3)
  );
  newGeometry.setAttribute(
    'color',
    new Float32BufferAttribute(geometryColors, 3)
  );
  newGeometry.computeBoundingSphere();
  geometryArray.push(newGeometry);
}

// 方式2：如果必须使用baseGeometry，克隆后删除索引
const newGeometry = baseGeometry.clone();
newGeometry.deleteAttribute('index'); // 移除原索引，避免合并冲突
newGeometry.setAttribute(
  'position',
  new Float32BufferAttribute(geometryPositions, 3)
);
newGeometry.setAttribute(
  'color',
  new Float32BufferAttribute(geometryColors, 3)
);
newGeometry.computeBoundingSphere();
if (geometryPositions.length > 0) {
  geometryArray.push(newGeometry);
}

然后执行合并，同时过滤无效几何体：

// 过滤空的或无顶点的几何体
const validGeometries = geometryArray.filter(geo => geo.attributes.position.count > 0);
const merged = BufferGeometryUtils.mergeBufferGeometries(validGeometries, false);
if (merged) {
  this.group.add(new Mesh(merged, baseMaterial));
}

方案2：直接构建大几何体（性能最优）

跳过创建数万个小几何体的步骤，直接将所有顶点数据合并到一个大数组中，一次性创建单个BufferGeometry：

// 预先初始化全局顶点和颜色数组
const allPositions = [];
const allColors = [];

// 遍历你的所有点数据（替换成你的实际数据遍历逻辑）
yourPointDataCollection.forEach(data => {
  const { positions, colors } = data;
  // 跳过空数据
  if (positions.array.length === 0 || colors.array.length === 0) return;
  // 合并数据
  allPositions.push(...positions.array);
  allColors.push(...colors.array);
});

// 创建单个大几何体
const mergedGeometry = new BufferGeometry();
mergedGeometry.setAttribute('position', new Float32BufferAttribute(allPositions, 3));
mergedGeometry.setAttribute('color', new Float32BufferAttribute(allColors, 3));
mergedGeometry.computeBoundingSphere();

// 添加到场景
this.group.add(new Mesh(mergedGeometry, baseMaterial));

关键说明 #

• 方案2性能远优于方案1：避免了创建数万个小BufferGeometry的内存开销和对象创建成本，直接合并原始数据是最高效的方式。
• 始终过滤空数据：空几何体或空顶点数组会导致合并后的几何体属性异常，必须提前过滤。
• 确保材质配置正确：MeshBasicMaterial的vertexColors设为true，保证顶点颜色生效。

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