Three.js Solar System — Draggable Orbiting Planets in WebGL

<canvas id="solarCanvas"></canvas>
<button id="solarPause" class="solar-pause">⏸ Pause orbits</button>

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#040611}
#solarCanvas{display:block;width:100%;height:100%;cursor:grab}
#solarCanvas:active{cursor:grabbing}
.solar-pause{position:fixed;right:18px;top:18px;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.18);background:rgba(10,14,26,0.6);color:#e2e8f0;font:12.5px system-ui,sans-serif;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.solar-pause:hover{background:rgba(30,41,59,0.75)}

const canvas = document.getElementById('solarCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 200);
camera.position.set(0, 14, 24);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.minDistance = 8;
controls.maxDistance = 60;

scene.add(new THREE.AmbientLight(0x334155, 0.5));

const sun = new THREE.Mesh(
  new THREE.SphereGeometry(1.6, 32, 32),
  new THREE.MeshBasicMaterial({ color: 0xffb547 })
);
scene.add(sun);
const sunLight = new THREE.PointLight(0xffd28a, 3, 80);
sun.add(sunLight);

// Faint dotted orbit paths, drawn once from a ring of points per planet, so
// the visitor can see each orbit's radius even when the planet itself is on
// the far side of the sun.
function addOrbitPath(radius) {
  const pts = [];
  for (let i = 0; i <= 128; i++) {
    const a = (i / 128) * Math.PI * 2;
    pts.push(new THREE.Vector3(Math.cos(a) * radius, 0, Math.sin(a) * radius));
  }
  const geo = new THREE.BufferGeometry().setFromPoints(pts);
  const mat = new THREE.LineBasicMaterial({ color: 0x475569, transparent: true, opacity: 0.5 });
  scene.add(new THREE.Line(geo, mat));
}

// Planet definitions: radius from sun, planet size, color, orbit speed,
// self-rotation speed, and an optional moon.
const PLANETS = [
  { dist: 3.4,  size: 0.28, color: 0x93c5fd, speed: 1.2,  spin: 0.02 },
  { dist: 4.8,  size: 0.42, color: 0xf59e0b, speed: 0.85, spin: 0.017 },
  { dist: 6.6,  size: 0.46, color: 0x60a5fa, speed: 0.62, spin: 0.02, moon: { dist: 0.9, size: 0.13, color: 0xcbd5e1, speed: 2.4 } },
  { dist: 8.4,  size: 0.34, color: 0xf87171, speed: 0.48, spin: 0.018 },
  { dist: 11.2, size: 0.9,  color: 0xfbbf24, speed: 0.27, spin: 0.03 },
  { dist: 14,   size: 0.72, color: 0xfcd34d, speed: 0.19, spin: 0.028, ring: true },
];

const planets = PLANETS.map(p => {
  addOrbitPath(p.dist);

  const pivot = new THREE.Object3D();
  scene.add(pivot);

  const mesh = new THREE.Mesh(
    new THREE.SphereGeometry(p.size, 24, 24),
    new THREE.MeshStandardMaterial({ color: p.color, roughness: 0.6, metalness: 0.1 })
  );
  mesh.position.x = p.dist;
  pivot.add(mesh);

  if (p.ring) {
    const ring = new THREE.Mesh(
      new THREE.RingGeometry(p.size * 1.4, p.size * 2.1, 48),
      new THREE.MeshBasicMaterial({ color: 0xd6c48a, side: THREE.DoubleSide, transparent: true, opacity: 0.6 })
    );
    ring.rotation.x = Math.PI / 2.3;
    mesh.add(ring);
  }

  let moonPivot = null, moonMesh = null;
  if (p.moon) {
    moonPivot = new THREE.Object3D();
    mesh.add(moonPivot);
    moonMesh = new THREE.Mesh(
      new THREE.SphereGeometry(p.moon.size, 16, 16),
      new THREE.MeshStandardMaterial({ color: p.moon.color, roughness: 0.8 })
    );
    moonMesh.position.x = p.moon.dist;
    moonPivot.add(moonMesh);
  }

  return { ...p, pivot, mesh, moonPivot, moonSpeed: p.moon ? p.moon.speed : 0 };
});

let paused = false;
const pauseBtn = document.getElementById('solarPause');
pauseBtn.addEventListener('click', () => {
  paused = !paused;
  pauseBtn.textContent = paused ? '▶ Resume orbits' : '⏸ Pause orbits';
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);

  if (!paused) {
    sun.rotation.y += 0.0015;
    planets.forEach(p => {
      // Each planet orbits by rotating its own pivot Object3D, not by
      // recalculating x/z manually — Three.js's scene graph does the
      // orbit math for free once the mesh is offset from its pivot.
      p.pivot.rotation.y += p.speed * 0.006;
      p.mesh.rotation.y += p.spin;
      if (p.moonPivot) p.moonPivot.rotation.y += p.moonSpeed * 0.02;
    });
  }

  controls.update();
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();