ThreeJsJavaScriptGraphics3D

Interactive 3D Solar System With Three.js

Building an Interactive 3D Solar System with Three.js: A Step-by-Step Guide

Have you ever wanted to create your own virtual solar system? With Three.js, we can bring the cosmos to life right in your web browser! In this tutorial, we’ll build an interactive 3D solar system that users can explore, complete with rotating planets and orbital mechanics.

What We’ll Build

Our solar system simulation includes:

  • A glowing sun at the center
  • Eight planets orbiting at different speeds
  • Realistic size scaling and distances
  • Interactive camera controls for exploration
  • Responsive design that works on all devices
  • Orbital paths visualization
  • Planet rotation animations

Prerequisites

To follow along, you’ll need:

  • Basic knowledge of JavaScript
  • A text editor or IDE
  • A modern web browser
  • Three.js library
  • OrbitControls module

Key Concepts

1. Scene Setup

The foundation of any Three.js project starts with three core elements:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });

This creates our 3D space, sets up our viewpoint, and prepares the renderer that will draw everything to the screen.

2. Lighting System

We use two types of lights to create depth and realism:

const ambientLight = new THREE.AmbientLight(0x404040);
const pointLight = new THREE.PointLight(0xffffff, 2, 100);

The ambient light provides base illumination, while the point light at the sun’s position creates dynamic shadows and highlights.

3. Planet Creation

Each planet is created using spherical geometry and custom materials:

const planetGeometry = new THREE.SphereGeometry(radius, 32, 32);
const planetMaterial = new THREE.MeshStandardMaterial({
  color: color,
  metalness: 0.4,
  roughness: 0.7,
});

We store planetary data in an array of objects, making it easy to manage properties like size, orbit distance, and rotation speed.

4. Orbital Mechanics

To create realistic orbits, we use trigonometry to calculate planet positions:

planet.angle += planet.speed * 0.01;
planet.mesh.position.x = Math.cos(planet.angle) * planet.distance;
planet.mesh.position.z = Math.sin(planet.angle) * planet.distance;

This creates elliptical paths around the sun, with each planet moving at its own speed.

5. Interactive Controls

The OrbitControls module enables user interaction:

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

Users can:

  • Zoom in/out with the mouse wheel
  • Rotate the view by dragging
  • Pan around using right-click drag

6. Responsive Design

We ensure the simulation looks good on all devices:

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

Cross-Browser Compatibility

The code uses standard Three.js features ensuring wide browser support, with fallbacks for older browsers.

Conclusion

This project demonstrates the power of Three.js for creating interactive 3D visualizations. While our solar system is simplified, it provides a solid foundation for more complex astronomical visualizations.

you can explore the solar system yourself by clicking on the link below.

Resources