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)

从372下降到22