THREE.JS合并物体工具提升渲染性能

1. THREE.JS合并物体工具提升渲染性能

three.js 中 BufferGeometryUtils.mergeBufferGeometries可以实现，渲染大量的具有相同材质，但可以几何体不同的的网格

• 渲染大量的网格
• 具有相同的材质
• 可以是不同的几何体

例如渲染10000个网格

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
let geometries = [];
for (let i = 0; i < 10000; i++) {
	const geometry = new THREE.TorusKnotBufferGeometry(
				0.5 + Math.random() * 0.5,
				8.3,
				50 + parseInt(Math.random() * 50),
				16)
	const matrix = new THREE.Matrix4(); 
	matrix.makeRotationX(Math.random() * Math.PI);
	matrix.makeRotationY(Math.random() * Math.PI);
	matrix.makeRotationZ(Math.random() * Math.PI);
	matrix.makeTranslation(Math.random() * 5,
				Math.random() * 1 - 10,
				Math.random() * 1)

	geometry.applyMatrix4(matrix);
	geometries.push(geometry);
}

创建10000个TorusKnot几何体，然后将他添加到 geometries 数组中

let mergeGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);

将这10000个网格进行合并

创建和添加到场景中

let mesh = new THREE.Mesh(mergeGeometry, material);
scene.add(mesh)