← Back to projects
Shipped 2024

3D Solar System

An interactive 3D solar system in Three.js, with a textured sun and four planets orbiting at different speeds, plus live controls to toggle each orbit.

  • Three.js
  • WebGL
  • Next.js
  • React
  • 3D Graphics

Why I built it

I wanted to learn real time 3D graphics by building something that moves. A solar system covers a lot of ground: textured spheres, a scene graph, nested rotations, and an animation loop that has to stay smooth.

How it works

  • A Three.js scene graph. The sun, the planets, and their orbits are nested THREE.Groups, so rotating a parent group carries its planet around the sun.
  • Different orbit speeds. Each planet’s speed comes from an EARTH_YEAR constant (Mercury fastest, Mars slowest), driven by a requestAnimationFrame loop.
  • Small reusable classes. Planet and Rotation handle geometry, texture loading, and spin, so adding a new body takes a couple of lines.
  • Live controls. A dat.gui panel turns each planet’s orbit on and off while the scene runs.

Stack

Three.js / WebGL · Next.js + React · texture mapped SphereGeometry · dat.gui.

What I took from it

My first real project on the 3D side of the web: scene graphs, texture loading, and animation loops.