The trick
Everything hangs from a base group (an Object3D). Dragging or scaling only
touches that group, and the objects, rings and moons inside inherit its spin and size.
Graph
Scene graph in Three.js: every object lives inside a group, and when the group spins or scales, everything inside moves with it. Add objects, rings and moons, and drag to spin.
The moons
Each moon lives in its own group, placed where the last object is and hung from the base group. That group spins on its own, so the moon circles its object while the whole system spins.
Made with
Three.js: nested groups, random shapes (dodecahedron, icosahedron, octahedron and sphere)
with Phong material, rings made with RingGeometry, and a directional light
plus an ambient one.