Daniel Gray

Thoughts, Notes, Ideas, Projects

Contact

Designing a 3D Solar System Browser

When I set out to build this blog, I knew I wanted to create something that went beyond just writing about science—I wanted to create an experience that captures the wonder and excitement I felt when I first studied planetary science. The result is an interactive 3D solar system browser that lets visitors explore our cosmic neighborhood in a way that's both educational and genuinely fun.

Why a 3D Solar System?

During my time studying planetary science, I was constantly struck by how difficult it is to truly grasp the scale and relationships in our solar system from textbooks and static images. The distances are vast, the relative sizes are hard to visualize, and the orbital dynamics that govern everything are abstract concepts until you see them in motion.

I wanted to create something that would:

  • Make the abstract tangible: Seeing planets orbit in real-time (albeit sped up) helps internalize concepts like orbital periods, eccentricity, and the relationships between bodies.
  • Spark curiosity: There's something inherently engaging about being able to click on a planet and zoom in, to hover over a moon and see its details appear.
  • Serve as a learning tool: Not just for visitors, but for myself—a place to refresh my knowledge and keep detailed notes about each planetary body as I continue learning.

Design Decisions

Realistic Orbits, Scaled Visualization

One of the first challenges was balancing scientific accuracy with visual clarity. Real astronomical distances are so vast that if we used true scale, planets would be invisible specks. I chose to:

  • Scale distances by 4x: This prevents planets from overlapping while maintaining their relative positions
  • Scale planet sizes appropriately: Keeping relative sizes accurate so Jupiter still dwarfs Earth, but making everything visible
  • Use realistic orbital speeds: The orbits are slowed down significantly (0.001x speed) so you can actually see the motion, but the relative speeds between planets are accurate

This means you can see the structure of the solar system at a glance, while still understanding that Jupiter really is much farther from the Sun than Earth.

Interactive Exploration

The browser isn't just a visualization—it's an exploration tool. Key features include:

  • Hover to learn: Hovering over a planet in the 3D view shows its name and key information
  • Click to focus: Clicking centers the camera on that body and follows it as it orbits
  • List navigation: A sidebar lists all bodies, sorted by distance from the Sun, making it easy to jump to any planet or moon
  • Article integration: Each body can link to a detailed article with research, images, and the latest discoveries

Following Moons

One of my favorite features is the ability to focus on moons and have the camera follow them as they orbit their parent planet. This was trickier than it sounds—initially, the camera was following the parent planet instead of the moon itself. Getting it right means you can truly appreciate the complex dance of, say, Jupiter's Galilean moons or Saturn's ring system.

Visual Polish

I wanted the visualization to feel polished and modern:

  • Improved lighting: Brighter planets, a much brighter Sun, and proper shadows cast from the Sun onto planets and moons
  • Planetary rings: Saturn, Uranus, and Neptune have rings with correct orientations and tilts
  • Starfield background: A backdrop of stars that appear as soft, blurred points rather than harsh rectangles
  • Smooth animations: Camera movements use interpolation for smooth transitions

Technical Architecture

The system is built with:

  • Three.js for 3D rendering
  • Next.js for the web framework
  • A plugin system that reads orbital data from article frontmatter

This last point is crucial—each planetary body article can include its orbital and physical data in the frontmatter, and the 3D visualization automatically reads and uses that data. This means:

  • Articles are the source of truth
  • Data stays synchronized between articles and visualization
  • Adding new bodies is as simple as writing an article with the right frontmatter

The Joy of Learning

What I love most about this project is how it combines my interests in planetary science, web development, and education. Every time I add a new planetary body article or improve the visualization, I'm learning something new or refreshing knowledge I haven't touched in years.

The 3D browser serves multiple purposes:

  1. For visitors: An engaging way to explore the solar system and learn about each body
  2. For me: A knowledge base where I can keep detailed notes, research summaries, and links to the latest discoveries
  3. For the community: An open resource that makes planetary science more accessible

Future Directions

There's always more to add:

  • More planetary bodies (dwarf planets, more moons)
  • Texture mapping from NASA/JPL data
  • More detailed orbital mechanics (eccentricity, inclination)
  • Integration with NASA news feeds for each body
  • Research summaries generated from recent papers

But even in its current form, I'm proud of what this has become—a tool that makes the solar system feel tangible and explorable, and a place where I can continue learning and sharing the joy of planetary science.