提示：本文写到three.js中合并多个不同材质的mesh为一个多材质mesh的方法
文章为原创文章，如在别的平台引用请注明出处。

---

前言

Three.js 作为 WebGL 框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求。
但是当我们渲染几何体比较多的场景时候，有很多细小、零散模型我们不需要对他进行任何操作。模型数目多到一定数量，性能 就会成为瓶颈，就会造成整个场景加载很慢。这个时候我们就想把场景中的一些细小、零碎且不需要任何操作的模型合并成一个，这个就可以提高整个场景的渲染速度，而且在操作模型树时也变得非常简洁。

---

一、group

在three.js中可以通过 group() 函数将模型放进一个group中 ，可以很容易的操作和管理大量的网格。但是这并没有从本质上改变 每一个对象都是一个mesh的本质：每个对象依然是独立的，仍然需要对它们分别进行处理和渲染；只是将很多零件放进一个group中结构上看着简洁了而已，其渲染速度没有提升。
代码示例

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );

一、BufferGeometryUtils.mergeBufferGeometries

示例: 重头戏来了！！！

在最新版本的three.js中 BufferGeometryUtils.mergeBufferGeometries() 真正实现了将多个mesh合并为一个mesh(联合体)，且可以使用多个Material（材质），使其渲染的速度大大提升。【老版本里是Three.Geometry.merge】。

引入

首先想要使用该函数需要引入BufferGeometryUtils 文件
该文件在 three.js/examples/js/utils/BufferGeometryUtils.js

将该js文件拷贝到我们的项目中
这里演示下再普通的html文件引入BufferGeometryUtils.js 文件的示例

使用方式：

three.js中一个网格（mesh）包含 geometry 和 material，因此要将多个mesh合并为一个，就要将多要合并的mesh的 geometry 提取出来放到geometryArray数组中，将其材质也按相同的顺序存放在materialArray数组中。
然后使用geometryArray 传给BufferGeometryUtils.mergeBufferGeometries()函数。

BufferGeometryUtils.mergeBufferGeometries()函数有两个参数
第一个：是要合并的geometry数组，
第二个：参数为true或false，代表合并后变成一个geometry后是否使用多材质，进行渲染。如果设置为true，在只有就可以传入material数组进行多材质渲染。

let geometryArray = []; // 将你的要合并的多个geometry放入到该数组
let materialArray = []; // 将你的要赋值的多个material放入到该数组
// 合并模型
const mergedGeometries = BufferGeometryUtils.mergeBufferGeometries(geometryArray, true);
const singleMergeMesh = new THREE.Mesh(mergedGeometries, materialArray);
scene.add( singleMerge ); // 在场景中添加合并后的mesh(模型)

在这里说一下能够对一个物体赋多个材质的原理：
如果BufferGeometryUtils.mergeBufferGeometries的第二个参数为true的时候，在生成的一个geometry中会有一个groups属性，该属性下记录了，几何体从哪个面开始（start）之后的多少个面（count）对应的材质索引（materialIndex）。这样就可以对一个几何体进行多个材质的赋值了。

问题：

可能有很多人合并会发现 ；几何体的都位置不对， 这事因为在three.js中几何体存放的位置是相对于父级的位置，在我们合并几何体的时候需要将几何体的点的位置转化为世界坐标的位置。这样在合并后位置才能正确。
2022-05-07 补充：
在three.js中，如果一个mesh1它存在于另一个mesh2的children中，那么这个mesh1和mesh2就是父子级关系。 那么mesh1的geometry存放的所有点都是相对于mesh2原点的。 但是当使用BufferGeometryUtils.mergeBufferGeometries几何体合并时默认所要合并的所有几何体点的位置都是相对世界坐标的。如果不做处理将mesh1合并，就会发生合并后几何体位置就会出现混乱的问题。所以有些相对父级的几何体就需要在合并前提前将其geometry点的坐标转化为世界坐标，这样在合并后就不会发生位置点混乱，因为所有几何体的坐标参照都是世界左边的原点（scene场景的原点）。

假设mesh1网格是相对父级的左边将其转化为世界坐标的代码示例：

 let matrixWorldGeometry = mesh1.geometry.clone().applyMatrix4(mesh1.matrixWorld);
 //这个时候 matrixWorldGeometry 几何体的位置就已经转化成世界坐标的位置了

总结

BufferGeometryUtils.mergeBufferGeometries()
使用起来很方便，将一些无关紧要的几何体合并后，其整体看着也更简洁。
BufferGeometryUtils.mergeBufferGeometries()函数的原理其实很简单，无非就是对geometry几何体的点的合并。感兴趣的可以去看看源码，很简单。