Domphy

Galaxy

A points cloud of 15,000 particles arranged into spiral branches, colored on a warm-core to cool-rim gradient and blended additively into a deep-space backdrop, with a second sparse points layer as a faint distant starfield for scale contrast. Unlike every other example on this site, the geometry isn't built from args on a named THREE geometry class — it's raw Float32Array position/color buffers wired straight onto a bufferGeometry through explicit attach paths.

How it works

  • bufferGeometry + bufferAttribute: the geometry has no constructor args at all — its attributes.position/attributes.color are set by two bufferAttribute children, each args: [typedArray, itemSize] matching new THREE.BufferAttribute(array, itemSize). See args reconstruction.
  • Explicit attach paths: bufferAttribute has no .isX flag for attach inference to key off, so attach: "attributes-position" / "attributes-color" is always explicit — resolved relative to the direct parent instance (the bufferGeometry), not the grandparent points. See Grammar keys.
  • vertexColors: true on pointsMaterial tells the material to read per-vertex color from that color attribute instead of a single flat material.color — a plain boolean prop applied through the usual duck-typed props path.
  • Additive blending, capped: blending: AdditiveBlending (imported straight from three) plus depthWrite: false and transparent: true is the standard particle-cloud recipe — overlapping points brighten instead of occluding each other, which is what makes the core glow. opacity: 0.82 caps how far that stacking can climb, so the densest core reads warm instead of blowing out to flat white.
  • Background starfield: a second points sibling in scene (no vertexColors, a single flat color: "#9fb4ff", opacity: 0.35, no additive blending) scatters ~900 points on a distant shell around the galaxy — a cheap depth cue that needs none of the teaching machinery of the main cloud.
  • onFrame: (root, delta, self) rotates the galaxy points object slowly and continuously (visible arm sweep/parallax against the static starfield) and also drifts root.camera.position in a small sine orbit, re-calling root.camera.lookAt(0, 0, 0) every frame — see Animation & Loop.
  • Camera angle: camera: { position: [0, 3, 6.5] } sits about 25° above the galactic plane (atan(3 / 6.5) ≈ 25°) rather than dead top-down, so both the spiral arms and the disc's thickness read.
  • onCreated sets root.scene.background once, up front — a fixed cinematic backdrop lives inside the canvas, so doctor's DOM theme-color rules don't apply to it. See the ThreeOptions contract.

← Back to @domphy/three