An interactive 3D solar system, and how to make your own

Your own 3D model, built in stages

This is an advanced project, built in six stages, but there's no 3D software and you won't write any code. You'll describe each part to a free AI assistant, paste what it writes into a file, and explore.

• A 3D solar system that opens in any web browser and works offline
• The Sun and all eight planets, each moving at its real speed around its orbit
• The planets in their real positions for today's date, with a date display
• Drag to look around, zoom in and out, and click a planet to fly to it
• An information panel for each planet, Saturn's rings, the Moon and the asteroid belt
• Speed controls, from one day a second to one year a second, and a guided tour

Good for: anyone ready to try 3D after a couple of our projects, parents and teachers after a space project for a big screen, and space fans who want a model they can add to.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. So this guide builds the solar system in stages. After each stage, check it works and save a copy (solar-v1.html, solar-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

Build it in six steps

1. Ask for the Sun and the planets

   Copy this promptCopy

   I don't know how to code. Please make me an interactive 3D model of the solar system that runs in a web browser.
   
   Requirements:
   - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it.
   - No external libraries and no internet connection needed. Draw it on an HTML canvas with the 2D context, and write a simple 3D camera yourself: turn each 3D point into a screen position with perspective, so things further away look smaller.
   - A glowing Sun in the middle and the eight planets going round it on circular orbits, each at its real orbital period (Mercury 88 days, Earth 365.25 days, Neptune 60,182 days and so on).
   - Real distances would make the outer planets impossibly far away, so squash them: use 14 × the square root of the distance in AU. Make the planet sizes bigger than real so you can see them.
   - Draw each planet's orbit as a thin line, and a starfield in the background.
   - A dark space background that fills the canvas, and the canvas should fill its box and stay sharp on high-resolution screens.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as solar.html and double-click it. You should see the planets moving round the Sun.

   Everything looks flat or squashed? Tell the AI exactly what you see, for example "I'm looking straight down so it looks 2D. Please tilt the camera so I'm looking at it from slightly above."

2. Drag to look around, scroll to zoom

   Copy this promptCopy

   That works, thank you. Now please let me move the camera:
   - Drag with the mouse (or a finger) to orbit around the Sun: left and right spins, up and down tilts. Don't let it flip upside down.
   - Scroll the mouse wheel (or pinch on a phone) to zoom in and out, within sensible limits.
   - Make the camera movement smooth: it should glide towards where I dragged it, not jump.
   - Draw everything from back to front, so nearer planets cover further ones.
   - When nobody is touching it, slowly drift round.
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).

3. Make the planets look real

   Copy this promptCopy

   Please make the planets look much better:
   - Shade each planet like a ball lit by the Sun: bright on the side facing the Sun, dark on the far side. Use radial gradients.
   - Give each planet its real colours: grey Mercury, cream Venus, blue Earth with a few green continents and a thin glow of atmosphere, rusty Mars, banded Jupiter and Saturn, pale blue Uranus, deep blue Neptune.
   - Give Saturn its rings, tilted, with the back half of the rings drawn behind the planet and the front half in front of it.
   - Add the Moon going round the Earth every 27.3 days, and an asteroid belt of several hundred tiny dots between Mars and Jupiter.
   - Make the Sun glow and gently pulse.
   - Label each planet with its name underneath.
   
   Send me the complete updated file.

4. Put the planets where they really are today

   Copy this promptCopy

   Please put the planets in their real positions for today's date. For each planet use its mean longitude at 1 January 2000 (Mercury 252.25°, Venus 181.98°, Earth 100.46°, Mars 355.45°, Jupiter 34.40°, Saturn 49.94°, Uranus 313.23°, Neptune 304.88°) and move it on at its orbital period. Circular orbits are fine.
   
   Then add speed buttons: Pause, 1 day a second, 1 week a second, 1 month a second and 1 year a second, plus a "Today" button. Show the current date in the corner. Send me the complete updated file.

   Want it more accurate? Ask the AI to "use each planet's real orbital elements (eccentricity, inclination, ascending node and perihelion) and solve Kepler's equation". The orbits become slightly oval and tilted, exactly as they really are.

5. Click a planet to fly to it

   Copy this promptCopy

   Please make the planets clickable:
   - Clicking a planet (or a button with its name) makes the camera fly smoothly to it and follow it round its orbit, zoomed in close.
   - A panel beside the model shows that planet's name, distance from the Sun, length of its year and day, number of moons and one amazing fact.
   - A "Whole system" button and double-click fly back out to see everything. Clicking the Sun shows facts about the Sun.
   - Highlight the orbit of the chosen planet.
   
   Send me the complete updated file.

6. Add a guided tour and full screen

   Copy this promptCopy

   Please add:
   - A "Take the tour" button that flies to the Sun and then each planet in turn, staying six seconds on each and sweeping the camera round a little, until I press it again or touch the model.
   - A full screen button for the model.
   - Buttons to switch the orbit lines and the labels on and off.
   - Stop drawing when the model is scrolled out of view, so it doesn't use the battery.
   
   Send me the complete updated file.

Quick fixes

Saturn's rings are drawn on top of the whole planet. Please split the rings into the part further from the camera than Saturn and the part nearer, draw the far part first, then Saturn, then the near part. Send me the complete fixed file.

Twist it into something else

Once you've got a 3D camera, you can point it at anything:

Made something fun? Share a screenshot and tag us. We feature reader projects.

How every 3D game works underneath

You can find solar system models online, but building one shows you how every 3D game and film works underneath: points in space, a camera, and some maths to draw them on a flat screen. Once you've asked an AI to make one, you can ask it to make a 3D anything.

What to build next