104 THREE.JS 实现merge后显示相应的材质

之前，我使用merge实现过63 THREE.JS 将多个网格合并成一个网格，当时只是简单的实现了一下几何体的merge，证明merge后的能够提高很大的性能。merge的几何体有弊端就是，merge以后，只是一个整体，无法再分开，也没办法判断点击的哪个物体，这只适合合并一些场景内不再修改的模型。
那么问题来了，如果合并的这些模型的材质不一样，还想合并到一块怎么样？
接下来我们看一下实现思路。

geometry.merge

由于现在的几何体分为geometry和bufferGeometry，我们分别看一下这两种几何体的使用：

bufferGeometry.merge（bufferGeometry：BufferGeometry，offset：Integer）：null

bufferGeometry的merge方法只是普通的几何体合并。

geometry.merge ( geometry : Geometry, matrix : Matrix4, materialIndexOffset : Integer ) : null

geometry的合并方法我们发现，有一个第三项，这一项是设置当前使用材质的下标，因为我们创建网格的时候可以选择在材质选项选择传入一个材质数组，来实现当前网格可以同时使用多种材质。那么接下来我们就可以通过geometry的merge方法实现多个不同材质的mesh合并。如果几何体是bufferGeometry格式的，那我们只能先转成geometry来实现了。

案例

由于这个要求是我群里的小朋友提出来的，他是使用的gltf模型，导入到场景中的模型的几何体是bufferGeometry格式，我直接修改的他的代码实现的当前的需求：

• 首先，在load回调中获取到gltf对象

var loader = new THREE.GLTFLoader();
loader.load( 'zhuozi.gltf', function ( gltf ) {

• 创建材质数组和几何体数组

var meshArr = [];
var materialArr = [];

• 遍历获取到所有网格的材质和几何体

gltf.scene.traverse(function(child){
	if(child.isMesh){
		meshArr.push(child);
		materialArr.push(child.material);
	}
});

• 融合几何体，并设置几何体的材质下标

var geometry = new THREE.Geometry();
for(var i=0; i<meshArr.length; i++){
	meshArr[i].updateMatrix();
	geometry.merge(new THREE.Geometry().fromBufferGeometry(meshArr[i].geometry), meshArr[i].matrix, i);
}

• 通过当前的合并的几何体和材质数组创建新的网格

var mesh = new THREE.Mesh(geometry, materialArr);

其实我们只要在merge的时候设置好当前绑定的材质下标，和创建mesh的时候把材质数组传入，其实就已经成功了一大步了。

案例查看

https://www.wjceo.com/blog/threejs2/2018-11-02/180.html