Threejs性能优化：Instance实例化几何体和 Merge合并几何体

最新推荐文章于 2025-06-19 09:16:19 发布

我想_iwant

最新推荐文章于 2025-06-19 09:16:19 发布

阅读量5.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Threejs

本文链接：https://blog.csdn.net/qq_20535249/article/details/107709235

Threejs 专栏收录该内容

10 篇文章

订阅专栏

1.Instance实例化几何体

同一个Geometry ，同一个 material ，但可以通过索引轻松控制每一个个体大小、位置等

insGeometry = new THREE.BoxBufferGeometry(1, 1, 1);

//创建具有多个实例的实例化几何体
insMesh = new THREE.InstancedMesh(insGeometry, material, total);

//修改位置
let transform = new THREE.Object3D();
for (let index = 0; index < total; index++) {

    transform.position.set(Math.random() * 2000, Math.random() * 2000, Math.random() * 2000);
    transform.scale.set(Math.random() * 50 + 50, Math.random() * 50 + 50, Math.random() * 50 + 50);
    transform.updateMatrix();

	//修改实例化几何体中的单个实例的矩阵以改变大小、方向、位置等
    insMesh.setMatrixAt(index, transform.matrix);
}

scene.add(insMesh);

2.Merge合并几何体

不同的 Geometry ，同一个 material 没有索引可以使用，合并后变为一个个体，难以单独控制

 let geometries = [];
 let transform = new THREE.Object3D();
 for (let index = 0; index < total; index++) {

     let geometry = new THREE.BoxBufferGeometry(Math.random() * 50 + 50, Math.random() * 50 + 50, Math.random() * 50 + 50);
     transform.position.set(Math.random() * 2000, Math.random() * 2000, Math.random() * 2000);
     transform.updateMatrix();
     geometry.applyMatrix4(transform.matrix);

     geometries.push(geometry);

 }

 mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);

 mergedMesh = new THREE.Mesh(mergedGeometry, material2);


 scene.add(mergedMesh);

3.两者对比

	Instance实例化几何体	Merge合并几何体
Material	相同	相同
Geometry	相同	✔ 不同
单个控制	✔ 使用索引，轻松实现	难以实现
生成时间	✔ 快速	缓慢
渲染性能	较优	✔ 更优
内存占用	✔ 极少	较多