three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格

原创于 2023-05-21 00:53:29 发布

· 1.5k 阅读

1 ·

版权

文章标签：

#javascript #前端 #开发语言

在three.js中，通过一般方法渲染大量相同网格会导致性能问题。例如创建1000个立方体会造成卡顿。文章提出使用InstancedMesh代替，如`newTHREE.InstancedMesh(geometry,material,1000)`，可以显著提高性能，将帧率从372提升至22，展示了一种有效的优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格

在three.js中有时候我们需要渲染大量的相同几何体，材质的网格，但是如果用一般的方法来实现的花，通常性能不佳，卡顿。
例如我们创建1000个立方体，添加到场景中

for (let i = 0; i < 1000; i++) {
			const geometry = new THREE.BoxGeometry(1, 1, 1);
			const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
			const cube = new THREE.Mesh(geometry, material);
			cube.position.set((Math.random()* 10), (Math.random()* 10), (Math.random()* 10))
			scene.add(cube);
		}

这样的方法渲染器会调用很多次
在这里插入图片描述
但是如果我们使用InstancedMesh来渲染的话，会大大的解决卡顿，性能更佳

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const instanceMesh = new THREE.InstancedMesh(geometry, material, 1000)
scene.add(instanceMesh)