I Built a 3D Solar System You Can Fly Through in Your Browser

TL;DR: Static diagrams freeze planets in place. Videos move on their own timeline. A 3D solar system you can fly through puts you in control: click a planet, watch the camera glide to it, zoom in until it fills your screen, then spin it and watch films about it, all in the browser. No install, no account, no tracking.

Diagrams of the solar system sit still on a page. I wanted one you could fly through: click Mercury and watch the camera glide across space to meet it, get close enough to see its craters, drag to turn it in your hands, and watch a short film about it while the planet keeps spinning beside you. All in the browser, on a laptop or a phone.

I built the Solar System for exactly that. It's a 3D model of the Sun, eight planets, and the Moon that runs at visionvix.world, wrapped in real surface maps and moving on their orbits. Click a planet and the camera flies to it. Get closer, and you can zoom and spin it like you're holding it. 26 short films sit beside the planets, playing in a card rather than taking over the screen. Nothing to install, no account, and the tool stores nothing about you.

This article walks through what the explorer is, how it compares with a diagram or a video, each part of the tool on desktop and phone, how I built it, and what it cannot do yet.

What the Solar System Explorer Does

The Solar System is one of the 3D simulators I built under VisionVix, designed for anyone curious about the planets: students, teachers, parents, and space fans. At the time of writing, the simulator suite has nine worlds, seven of them live and two coming soon.

Each body is wrapped in a real surface map, so Mars is rust red with its dark plains, Jupiter carries its cloud bands, and Saturn has proper rings you can see through. The planets spin at their own speeds. Venus and Uranus turn backwards as they really do, and the Moon circles Earth.

The tool runs entirely in the browser. No plugin, no external requests, no cookies. Open the page, press a button, and the solar system loads. It works on a laptop and on a phone, with touch controls for dragging and pinching to zoom.

The Solar System has 26 short films across all celestial bodies: Earth has 11, the Sun and Moon each have 4, and every planet has at least one.

Diagram vs Video vs 3D Solar System Explorer

There are three common ways to learn the planets, and they do different jobs. A diagram sits still and lets you look at your own pace. A video moves through the planets on its own timeline, with narration and music. A 3D explorer lets you fly, spin, zoom, and choose what to look at.

Here's how they compare:

The explorer does not replace a good diagram or a good film. It puts them together: the films play beside the planet they are about, and the facts stay on screen while you look. When I checked NASA's Saturn moons page to verify the count, I found 293 known moons. That number sits in the panel next to Saturn while you zoom in and watch its rings tilt.

A diagram tells you Jupiter is big. The explorer shows you by making you fly past Mercury, Venus, Earth, and Mars before you reach it. Size and distance make sense when you move through them.

Walking Through the Explorer on Desktop

Open the Simulator and Choose the Solar System

Everything starts at VisionVix 3D Simulators. The landing page has an Open Simulators button that runs the tools right in your browser. It takes you to the Choose Your 3D World Simulator page, which lists every simulator that is ready, with a green Enter Simulator button on each card.

Press Enter Simulator on the Solar System card and the tool opens. You see the Sun at the center, eight planets on their orbits, and the asteroid belt between Mars and Jupiter. The camera starts far enough out to see the whole system.

Pick a Planet and Fly to It

Click any planet, in space or on the row of buttons at the bottom. The camera flies to it and a panel opens with its size, distance, moons, and a handful of facts. The arrows at the top of the panel step to the next or previous planet, and zooming out far enough takes you back to the whole system.

The flight path aims at where the planet is now, not where it was when you clicked. Planets keep moving while you look at them, so a camera that flies to a fixed point ends up looking at empty space. The fix was to aim at where the planet is now on every frame of the flight, and then ride along with it once you arrive.

Get Close to a Planet

The Explore Close Up button moves the camera in until one world fills the screen. Drag to turn it any way you like and scroll to zoom. It is the closest thing to holding a planet in your hands.

The Moon works the same way: click it beside Earth and it gets its own panel. You can zoom in until you see the craters and the dark maria, the lava plains that made early astronomers think they were looking at seas.

Watch the Films

Every planet has at least one short film. Earth has 11 films, the Sun and Moon each have 4, and the other planets have between one and three. That's 26 in all. They open in a card beside the planet rather than taking over the screen, with a playlist, next and previous buttons, and the next film starting when one ends.

The films are mine, shot and edited for this tool. I compressed them so they start quickly and play smoothly beside the planets. A film about Jupiter's Great Red Spot plays while you look at Jupiter. The context stays on screen.

Set the Pace

The Orbit Speed slider has three steps: paused, slow, and a little faster. Switches show or hide the orbit lines, the labels, and the asteroid belt. Every few seconds an asteroid drifts past the camera, which you can also turn off.

One clock runs everything. Orbits and spins share a single timer, so when you slow the system down, every planet slows together and keeps its true spin direction. Venus turns backwards at any speed.

How It Works on a Phone

On a phone the controls fold behind a Controls button and the planet panel becomes a sheet at the bottom of the screen, so the planet stays in view. Tap a planet to select it, drag to turn it, and pinch to zoom.

The flight works the same way: tap a planet and the camera glides to it. The films play in the same card beside the planet, and the playlist buttons are big enough to tap without missing. I tested it on an iPhone and on an Android phone. Both work.

The tool does not install anything. It runs in the browser, so you can bookmark it and come back without logging in or setting up an account. I built it to respect the principles I cover in VisionVix's website best practices: fast, private, and accessible.

Why a 3D Solar System Explorer Helps

Size and distance make sense. Flying from tiny Mercury out to Jupiter shows the scale better than any list of numbers. You see how far apart the planets are, and how much empty space sits between them.

Curiosity leads the lesson. A student clicks what interests them, and the facts and films are right there when they do. No quiz, no forced order. If they want to start with Saturn because they like the rings, they start with Saturn.

It works for a class or alone. A teacher can drive it on a big screen, clicking through the planets and pausing the films to discuss them. Then students can explore on their own phones, at their own pace.

The facts are checked. Moon counts and other figures were verified against current sources before launch. Saturn's 293 known moons match NASA's count. The surface maps come from Solar System Scope, shared under a CC BY 4.0 license, with extra height detail on Mercury, Mars, and the Moon so their craters catch the light.

Curiosity-led learning means students choose what interests them, and the information appears immediately when they do.

I wanted a tool that combined the control of a diagram with the motion of a video. The explorer does that. You set the pace, you choose the angle, and the films play when you want them to.

How I Built It

A 3D Engine in the Browser

The scene runs on three.js, a widely used library for 3D in the browser. There is no plugin and nothing to install. The library loads with the page, builds the scene, and starts the animation loop. Every planet is a sphere wrapped in a texture map, and the camera is a perspective camera that moves through 3D space.

Real Planet Maps

The surfaces come from Solar System Scope's maps, shared under a CC BY 4.0 license. I added extra height detail on Mercury, Mars, and the Moon so their craters catch the light. The height maps are grayscale images where white is high and black is low. The 3D engine reads them and shifts each pixel up or down, so you see the rim of a crater when the light hits it at an angle.

One Clock for Everything

Orbits and spins share a single clock. When you slow the system down, every planet slows together and keeps its true spin direction. Venus and Uranus turn backwards because their rotation is set to a negative value. The Moon orbits Earth, and Earth orbits the Sun, all on the same timer.

The hardest part was the camera. Planets keep moving while you look at them, so a camera that flies to where a planet was ends up looking at empty space. The fix was to aim at where the planet is now on every frame of the flight, calculate the planet's position in real time, and point the camera at that moving target. Once the camera arrives, it rides along with the planet, matching its orbit speed.

My Own Films

The 26 films are mine, compressed so they start quickly and play smoothly beside the planets. Each film is between 30 seconds and two minutes long. They cover the planet's size, its surface, its moons, and one or two unusual facts. I shot some of them with graphics I built, and others with animations of the planets themselves.

The films open in a card beside the planet rather than taking over the screen. The playlist shows all the films for that planet, and clicking next or previous steps through them. When one film ends, the next one starts.

What It Cannot Do Yet

The tool does not show the planets to scale in the same view. If I did that, you would see Jupiter and Saturn, and Mercury would be a dot too small to click. So the planets are scaled up relative to their orbits, which means you can see and click them, but the size relationships between planets are not accurate when you look at the whole system. When you zoom in on a single planet, the scale is correct for that planet.

The orbit speeds are not real-time. The planets would take months or years to complete an orbit at real speed, so I sped them up. The relative speeds are roughly correct: Mercury moves faster than Earth, and Neptune moves slower. But they are not true to life.

The tool does not show all the moons. Jupiter has 95 known moons, and Saturn has 293. Showing all of them would clutter the screen and slow the browser. I show Earth's Moon because it is familiar and because people expect to see it. The other moons are listed in the planet panels, but they do not appear in 3D.

The asteroid belt is a cloud of particles, not individual asteroids. Real asteroids are far apart, but a cloud of particles looks better on screen and gives a sense of the belt without slowing the browser.

Why I Built This

I built the 3D Solar System because I wanted a tool that put the user in control. Diagrams are static. Videos move on their own timeline. A 3D explorer lets you fly, zoom, and choose what to look at. I wanted to combine the facts from a diagram, the motion from a video, and the freedom to explore at your own pace.

I built it as part of the VisionVix 3D simulators, a set of tools that run in the browser and let you explore different worlds. The solar system is one of them. I built others, and I will build more. You can see them all at VisionVix 3D Simulators.

The tool follows the same principles I use for all my work: fast, private, and accessible. No install, no account, no tracking. It loads quickly, stores nothing about you, and works on a laptop or a phone. I write about those principles in VisionVix's SEO best practices, and I apply them to everything I build.

If you want to see how it works, open visionvix.world, press Open Simulators, and choose the Solar System. Click a planet, watch the camera fly to it, zoom in, and spin it. The films are there when you want them, and the facts stay on screen while you look. You can also see more of my projects on my YouTube channel, where I walk through the tools I build and how I built them.

The Solar System does what I wanted it to do: it lets you fly through the planets, get close, and explore at your own pace. If you are curious about the solar system, or if you teach students who are, it is there for you to use.

📦 Publishing Kit — Dev.to

Title Options (5)

Selected: I Built a 3D Solar System You Can Fly Through in Your Browser

Alternates:

1. From Static Diagrams to Interactive Space: Building a Browser-Based Solar System Explorer
2. Click a Planet, Fly There, Spin It: Creating an Interactive 3D Solar System
3. How I Built a 3D Solar System Explorer with 26 Films and Zero Installs
4. Building a Web-Based Solar System: When Diagrams and Videos Aren't Enough

Slug

building-interactive-3d-solar-system-browser-explorer

Tags

webdev, tutorial, javascript, threejs