Solar System
Foundations
Lesson 3 of 15
Use nested groups to separate a planet's orbit from a moon's local orbit.
Animate a sun, planet, moon, and orbit ring using a parent–child scene graph.
How this scene works
orbitPivot sits at the sun and rotates both the planet and moonPivot around it. moonPivot is offset seven units from its parent, so rotating moonPivot moves only the moon around the planet. These are local transforms: the moon inherits both rotations. The sun's emissive material makes its surface bright, but does not illuminate other objects; a PointLight supplies that light. Distances and speeds are illustrative, not astronomical.
Solar System
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Add a second planet with its own pivot and a larger orbit. Give it half the first planet's angular speed without changing the moon's motion.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
