Three.js Galaxy Spiral — Procedural WebGL Spiral Galaxy Particles

The Three.js Galaxy Spiral snippet procedurally generates 12,000 particles into a convincing spiral-galaxy shape — dense glowing core, four sweeping arms, warm-to-cool color gradient — using nothing but a radius-driven spin formula and additive blending, with core Three.js and OrbitControls loaded from a CDN.

The entire spiral shape comes from one line: spin angle grows with radius

The defining formula of this snippet is deceptively simple: each particle's final angle around the center is armAngle + radius * SPIN. Because particles further from the core have a larger radius, they've been rotated further around their arm than particles close in — and that difference in rotation-per-radius is the *entire* mathematical definition of a logarithmic spiral. Multiple arms come from assigning each particle to one of ARMS evenly-spaced starting angles via (i % ARMS) / ARMS, so the same spin formula, applied to four different starting angles, produces four parallel spiral arms rather than one.

A power-curve radius distribution, not a uniform one

Radius is sampled as Math.random() ** 1.6 * RADIUS rather than plain Math.random() * RADIUS. Raising a 0–1 random value to a power greater than 1 biases the result toward zero — concentrating far more particles near the galactic core and thinning them out toward the edge, matching how real galaxies are visibly denser at the center. A plain linear distribution would produce an unrealistic, evenly-spread disc instead.

Randomness that shrinks toward the edges

Each particle gets a small random X/Y/Z jitter added on top of its ideal spiral position, but that jitter's magnitude is itself scaled by (1 - r/RADIUS) — particles near the core get more scatter, particles near the outer edge get almost none. This produces a galaxy that looks appropriately "fuzzy" and turbulent near its bright center while its outer arms stay crisp and well-defined, rather than uniform noise applied everywhere.

Color mixed by radius, not randomly assigned

Every particle's color is a linear interpolation between a warm inner color and a cooler outer color, using radius / RADIUS as the mix factor via THREE.Color.lerp(). Because that same radius value also drives the spiral math, color and shape share one underlying number — exactly the same principle used in the particle wave snippet's height-to-color link, applied here to radial position instead of elevation.

Differential rotation: inner particles orbit faster than outer ones

Real galaxies don't rotate as a rigid disc — stars closer to the center complete an orbit much faster than stars near the edge. The animation loop gives each particle a rotation speed of 1 / (0.3 + radius), so particles near the core visibly race around while outer-arm particles drift slowly, which is what keeps the spiral arms from ever looking like they're rigidly spinning in lockstep.

Additive blending makes overlapping particles glow

The PointsMaterial uses THREE.AdditiveBlending, which sums overlapping particle colors instead of one drawing over another. Wherever many particles cluster densely — especially near the bright core — their colors add together into a genuinely brighter glow, rather than the topmost particle simply hiding the ones behind it.

Where this generation technique applies

The radius-driven-angle-plus-power-curve-density formula generalizes to any spiral or vortex shape — hurricane visualizations, whirlpool effects, or abstract vortex loaders. Pair it with a starfield warp for a "traveling toward a galaxy" scroll sequence, or contrast its particle-based density against the smooth, continuous surface of the morphing blob.