1. 流程
- 创建场景、相机和渲染器：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
创建一个Three.js场景、相机和渲染器，并将渲染器的输出添加到HTML文档中。
- 创建几何体和材质：
const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 创建一个基础材质
创建一个几何体对象和一个材质对象，这里使用了一个立方体几何体和一个红色的基础材质。
- 创建实例化网格：
const instanceCount = 100; // 实例数量
const instancedMesh = new THREE.InstancedMesh(geometry, material, instanceCount);
使用几何体和材质创建一个实例化网格对象，传入几何体、材质和实例数量作为参数。
- 设置实例化属性和实例化矩阵：
const positions = new Float32Array(instanceCount * 3); // 存储位置属性值的数组
const matrix = new THREE.Matrix4(); // 实例化矩阵
for (let i = 0; i < instanceCount; i++) {
// 设置位置属性
positions[i * 3] = Math.random() * 10 - 5; // 随机生成位置属性值
positions[i * 3 + 1] = Math.random() * 10 - 5;
positions[i * 3 + 2] = Math.random() * 10 - 5;
// 设置实例化矩阵
matrix.setPosition(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
instancedMesh.setMatrixAt(i, matrix);
}
instancedMesh.setAttribute('position', new THREE.InstancedBufferAttribute(positions, 3));
创建一个存储位置属性值的数组，并使用循环为每个实例设置随机的位置属性值。然后，使用实例化矩阵设置每个实例的变换。最后，将位置属性和实例化矩阵设置到实例化网格对象中。
- 添加到场景中：
scene.add(instancedMesh);
将实例化网格对象添加到场景中，以便在渲染时显示。
- 设置相机位置：
camera.position.z = 5;
设置相机的位置，以便在渲染时能够看到实例化网格。
- 渲染场景：
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
使用渲染器将场景和相机渲染到屏幕上。通过使用requestAnimationFrame函数，可以实现动画效果，使场景在每一帧都进行渲染。
通过以上流程，就可以使用Three.InstancedMesh来渲染100个相同几何体的实例化网格。每个实例可以具有不同的位置属性和变换效果，从而实现多个实例的独立渲染。
