three.js 合并 mesh 报错（BufferGeometryUtils.mergeGeometries）

问题

three.js 中需要将 group 中的多个 mesh 合并成一个 mesh ，调用 BufferGeometryUtils.mergeGeometries 合并的时候报错：THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.

分析

分别打印需要合并的 geometry 的 attributes，发现里面的 uv 属性，一个是 Uint16Array， 另一个是 Float32Array，所以报了 consistent array types 的错误

解决

1. 转格式，使两个数组格式一致
2. 删除 uv 属性（如果用不到的话）geometry.deleteAttribute('uv')

附

合并 mesh 的方法

private merge(cargo: Group): Mesh | null {
    const geometries: BufferGeometry[] = []
    const meshes: Mesh[] = []
    cargo.children.map((child: Mesh) => {
      meshes.push(child)
      child.geometry.deleteAttribute('uv')
      geometries.push(child.geometry.index ? child.geometry.toNonIndexed() : child.geometry.clone())
    })
    for (const [i, g] of geometries.entries()) g.applyMatrix4(meshes[i].matrixWorld)
    const mergedGeometry = mergeGeometries(geometries, true)

    const materials: Material[] = cargo.children.map((child: Mesh) => child.material as Material)

    const mergedMesh = new Mesh(mergedGeometry.clone(), materials)
    mergedMesh.scale.copy(cargo.scale)
    mergedMesh.rotation.copy(cargo.rotation)
 
    return mergedMesh
  }