Three.js 实现merge后显示相应的材质

之前，我使用merge实现过将多个网格合并成一个网格，当时只是简单的实现了一下几何体的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来实现了。
案例

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

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

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

let meshArr = [];
let materialArr = [];

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

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

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

let 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);
}

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

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

import {Mesh, Geometry, ExtrudeGeometry} from 'three';

export default class Transformation {
  async createNewModel (result) {
    const array = await this.pushmaterial(result);
    const geometry = await this.createGeometry(array);
    return new Mesh(geometry, array.materialArr);
  }
  pushmaterial (result) {
    const meshArr = [];
    const materialArr = [];
    result.traverse(res => {
      if (res.isMesh) {
        meshArr.push(res);
        materialArr.push(res.material);
      }
    });
    return {'meshArr': meshArr, 'materialArr': materialArr}
  }
  createGeometry (e) {
    const geometry = new Geometry();
    e.meshArr.forEach((r, i) => {
      e.meshArr[i].updateMatrix();
      geometry.merge(new ExtrudeGeometry().fromBufferGeometry(e.meshArr[i].geometry, e.meshArr[i].matrix, i));
    });
    return geometry;
  }
}

Three.js 实现merge后显示相应的材质

猜你喜欢