3D Solar System

The problem

I wanted to learn real-time 3D graphics by building something that actually moves, rather than reading about it. A solar system is a great forcing function: textured spheres, a scene graph, nested rotations, and an animation loop that has to stay smooth.

What’s technically interesting

• A real Three.js scene graph. The sun, four planets, and their orbital systems are organized as nested THREE.Groups, so rotating a parent group carries its planet around the sun — the classic, correct way to model orbits with a scene graph.
• Differentiated orbital motion. Each planet orbits at a different speed derived from an EARTH_YEAR constant (Mercury fastest, Mars slowest), driven by a requestAnimationFrame loop targeting 60fps.
• Reusable OOP abstractions. Planet and Rotation classes encapsulate geometry, texture loading, and spin, so adding a body is a couple of lines — the renderer code stays clean.
• Live controls. A dat.gui panel toggles the visibility of each planet’s orbit at runtime, making the scene something you explore, not just watch.

Stack

Three.js / WebGL · Next.js + React shell · texture-mapped SphereGeometry · dat.gui runtime controls.

What I took from it

My first real dive into the 3D / graphics side of the web: scene graphs, texture loading, and animation loops. It’s the project that pairs thematically with the interactive data-visualization work I do now.