Project 13: Particle Field Demo

3D Engineer

Builds on these lessons

Step 1 of 2

Project

A Particle Field

drei's Points + PointMaterial render thousands of points efficiently from a single Float32Array of x/y/z positions.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

function ParticleField() {
  const count = 200;
  const positions = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    positions[i * 3] = (Math.random() - 0.5) * 6;
    positions[i * 3 + 1] = (Math.random() - 0.5) * 6;
    positions[i * 3 + 2] = (Math.random() - 0.5) * 6;
  }
  return (
    <Points positions={positions}>
      <PointMaterial size={0.05} color="white" />
    </Points>
  );
}

export default function Scene() {
  return (
    <Canvas>
      <ParticleField />
    </Canvas>
  );
}

← Previous Next →