Particle Field
Assets & scale
Lesson 13 of 15
Store many colored particles in BufferGeometry instead of creating a mesh per particle.
Render 1,800 reproducible star-like points with typed position and color attributes.
How this scene works
BufferAttributes pack triples of numbers into contiguous typed arrays. The position attribute supplies XYZ; color supplies linear RGB values from THREE.Color. PointsMaterial with vertexColors reads the per-point colors in one Points object. A seeded pseudo-random generator gives the same scene on each run, which makes edits and screenshot comparisons easier. Rotating the Points object moves the entire field without rewriting its buffers. These square point sprites do not use an external image.
Particle Field
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Flatten the field into a disk by scaling each particle's Y coordinate by 0.1. Then reduce particleCount to 300 and increase size to compare density and sprite size.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
