A realistic 3D Earth model made with Three.js, including atmosphere glow, rotating clouds, sunlight, and a galaxy of stars.
This project is all about learning 3D graphics with JavaScript, having fun with space visuals, and improving it over time!
Realistic Earth with:
- 🌐 Surface texture
- ✨ Specular (reflective) map
- 🗻 Bump map (for terrain depth)
- ☁️ Rotating cloud layer with transparency
- 🌃 Night lights visible on the dark side
- 🌈 Custom Fresnel shader for glow/atmosphere
- 🌌 Starfield with 3D depth and soft light dots
- 🎮 Interactive camera with orbit controls
- 🎨 ACES Filmic tone mapping and linear color space
- Download or clone the repo.
- Open
index.htmlin a browser using a local server
(e.g. with VS Code Live Server ornpx serve .) - Use your mouse to rotate, zoom, and explore the Earth.
- Watch as the Earth slowly spins and stars move in the background.
.
├── index.html # Main entry point
├── index.js # Sets up the 3D scene and animation
├── /src
│ ├── getFresnelMat.js # Custom shader material for atmospheric glow
│ └── getStarfield.js # Creates star points around the Earth
├── /textures
│ ├── 00_earthmap1k.jpg # Main Earth surface texture
│ ├── 01_earthbump1k.jpg # Bump map for terrain
│ ├── 02_earthspec1k.jpg # Specular map for reflectivity
│ ├── 03_earthlights1k.jpg # Night side city lights
│ ├── 04_earthcloudmap.jpg # Cloud texture
│ ├── 05_earthcloudmaptrans.jpg # Alpha map for clouds
│ └── /stars/circle.png # Star texture image
└── README.md- Three.js — for all 3D rendering
- GLSL — custom shaders for atmospheric glow
- OrbitControls — to move around the scene
- JavaScript ES Modules — for modern code structure
- 🌕 Add Moon orbiting Earth
- 🌓 Show real-time Earth shadow depending on sun angle
- 🌫️ Add atmosphere blur shader
- 🌠 Animate stars slowly twinkling
- 🗺️ Show info labels on continents
Made by Arush Diwakar — Age 13
Learning 3D graphics, shaders, and web development for fun!