Three.js Solar System — Draggable Orbiting Planets in WebGL

The Three.js Solar System snippet renders a glowing sun with six planets — one carrying a moon, one carrying a ring — all orbiting continuously at their own speeds, with a draggable camera and a pause button, using core Three.js plus its OrbitControls addon loaded from a CDN.

Object3D pivots do the orbit math, not manual trigonometry

The single most important idea in this snippet: each planet's mesh is offset along the X axis from an invisible THREE.Object3D pivot positioned at the origin, and the *pivot* is what actually gets rotated every frame — not the planet's own position. Because the mesh is a child of the pivot in the scene graph, rotating the parent automatically sweeps the offset child mesh through a perfect circular orbit. This completely replaces manually computing x = cos(angle) * radius, z = sin(angle) * radius by hand — Three.js's scene graph transform hierarchy does that math for free, and it's the standard technique for orbital motion in any 3D engine.

Moons nest a second pivot inside the planet

The planet with a moon carries a second Object3D pivot as a *child of the planet mesh itself*, with the moon offset from that inner pivot the same way the planet is offset from its own outer pivot. Rotating the inner pivot orbits the moon around the planet; because the moon-pivot is nested inside the already-orbiting planet, the moon automatically follows the planet around the sun too, with zero extra code to keep them together. This nested-pivot pattern is exactly how you'd extend the scene to add sub-moons, orbiting space stations, or any hierarchy of things-orbiting-things.

Dotted orbit paths use one Line per ring

Each planet's orbit radius is traced once at startup as a THREE.Line built from 128 points sampled around a circle — a static, unmoving ring drawn directly into world space (not attached to any pivot). This lets the visitor see exactly how far out each planet's orbit reaches even when the planet itself is hidden behind the sun or on the far side of the scene.

A ring is just a flat RingGeometry, tilted and parented to its planet

The outermost, ringed planet adds a THREE.RingGeometry — a flat annulus, not a torus — as a child of the planet mesh, tilted on its X axis and rendered with side: THREE.DoubleSide so it doesn't disappear when viewed edge-on or from below. Because it's parented to the planet mesh, the ring automatically follows the planet's orbit and spin without any additional transform logic.

Draggable camera via OrbitControls, bounded so you can't fly through the sun

A second CDN script, Three.js's OrbitControls addon, attaches drag-to-rotate and scroll-to-zoom camera behavior. minDistance and maxDistance keep the visitor from zooming in past the sun or zooming out until the whole system becomes a speck, and enableDamping makes every drag glide smoothly to a stop rather than snapping to a halt the instant the mouse button releases.

A real pause button, not just a visual toggle

Clicking "Pause orbits" sets a single boolean that the animation loop checks before advancing any rotation — the camera itself keeps responding to drags and OrbitControls' damping keeps updating even while paused, so the scene never feels frozen or unresponsive, only the orbital motion stops.

Where this technique scales

The pivot-per-orbiting-object pattern used here is the same one behind any "things circling other things" 3D scene — compare it with the flatter, ring-and-bead approach in orbit rings, or contrast the physically-accurate orbital hierarchy here against the purely decorative circular motion of a CSS-based orbiting icons snippet.