Three.js Demos A collection of Three.js Demos

Solar System

Realistic orbital mechanics with all planets, moons, and dynamic lighting from the sun.

What this code does

- Realistic Orbital Mechanics: all eight planets orbit at scientifically accurate relative speeds and distances.
- Dynamic Solar Lighting: central sun acts as point light source casting shadows on planets and moons.
- Planet Details: accurate planet sizes, colors, and special features like Saturn's rings and Earth's moon.
- Interactive Controls: adjust time scale, orbit speeds, planet sizes, and toggle orbit visualization.
- Starfield Background: procedural star field creates immersive space environment.
- Camera Controls: orbit around the solar system or follow specific planets with smooth camera movement.

JavaScript (plain)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 2000)
camera.position.set(0, 50, 100)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

renderer.shadowMap.enabled = true
document.querySelector('#app').appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

// Create sun
const sunGeometry = new THREE.SphereGeometry(5, 32, 32)
const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
const sun = new THREE.Mesh(sunGeometry, sunMaterial)
scene.add(sun)

// Create planets
const planets = []
const planetData = [
  { name: 'Earth', radius: 1.3, distance: 25, speed: 1, color: 0x6b93d6 },
  { name: 'Mars', radius: 1.0, distance: 32, speed: 0.53, color: 0xc1440e },
  { name: 'Jupiter', radius: 3.5, distance: 50, speed: 0.084, color: 0xd8ca9d }
]

planetData.forEach(data => {
  const geometry = new THREE.SphereGeometry(data.radius, 32, 32)
  const material = new THREE.MeshStandardMaterial({
    color: data.color,
    emissive: data.color,
    emissiveIntensity: 0.2
  })
  const planet = new THREE.Mesh(geometry, material)
  planet.userData = { distance: data.distance, speed: data.speed, angle: 0 }
  scene.add(planet)

  planets.push(planet)
})

// Lighting
const ambientLight = new THREE.AmbientLight(0x404040, 0.1)
scene.add(ambientLight)

const sunLight = new THREE.PointLight(0xffffff, 2, 1000)
scene.add(sunLight)

function animate() {
  requestAnimationFrame(animate)

  planets.forEach(planet => {
    planet.userData.angle += planet.userData.speed * 0.01
    const x = Math.cos(planet.userData.angle) * planet.userData.distance
    const z = Math.sin(planet.userData.angle) * planet.userData.distance
    planet.position.set(x, 0, z)
  })

  controls.update()
  renderer.render(scene, camera)
}
animate()
← Back