3D Particle Cloud
Three.jsThousands of points rendered with THREE.Points — a single draw call regardless of count. Vertex colors gradient from the cloud center outward. Drag to orbit, scroll to zoom.
concepts
Renders a BufferGeometry as instanced quads, one per vertex. Ten thousand particles cost roughly the same as one draw call — unlike individual Mesh objects which each need their own.
Position and color live in typed Float32Arrays uploaded to the GPU. Modifying them from JS requires setting needsUpdate = true, which re-uploads the buffer.
Setting vertexColors: true on the material tells Three.js to read per-vertex color from the geometry's 'color' attribute instead of using a single uniform material color.
When true, point size shrinks with distance from the camera (perspective). When false, all points are the same screen-space pixel size regardless of depth.
core pattern
const positions = new Float32Array(count * 3);
const colors = new Float32Array(count * 3);
// fill positions & per-vertex colors …
const geo = new THREE.BufferGeometry();
geo.setAttribute("position",
new THREE.BufferAttribute(positions, 3));
geo.setAttribute("color",
new THREE.BufferAttribute(colors, 3));
const mat = new THREE.PointsMaterial({
size: 0.035,
vertexColors: true, // read 'color' attribute
sizeAttenuation: true,
});
scene.add(new THREE.Points(geo, mat));