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)