Realistic 3D Globe using HTML, CSS & JavaScript

Bring Earth to life in your browser with this Realistic 3D Globe project. Built using Three.js, this interactive globe simulates real-world visuals with earth textures, atmospheric glow, and user-controlled rotation. It’s ideal for geography visualizations, data plotting, or just exploring Earth beautifully in 3D.

🧰 Technologies Used:

• HTML5 – Canvas container and layout

• CSS3 – Basic responsive styling

• JavaScript – Scene logic and interactivity

• Three.js – 3D rendering, globe textures, lighting, camera controls

• Optional: OrbitControls, Bump/Specular Maps, ShaderMaterials

✨ Features:

• High-resolution Earth texture

• Realistic lighting and shadows

• Optional cloud layer or atmosphere glow

• User interaction: rotate, zoom, pan

• Responsive and mobile-friendly

• Smooth animation loop

🧭 How It Works:

1. The globe is built using a sphere geometry (THREE.SphereGeometry).

2. Earth textures (diffuse, bump, and specular maps) are loaded to simulate terrain.

3. A directional light simulates sunlight with shadows and highlights.

4. OrbitControls allow users to rotate and zoom the Earth.

5. The scene is rendered continuously using requestAnimationFrame().

💡 Optional: Add cloud layers, country outlines, or satellite markers.

🧠 Learning Highlights:

• Using textures in WebGL scenes

• Mapping images on 3D geometry

• Controlling camera & lighting in Three.js

• Creating interactive, rotating 3D objects

• Using bump and specular maps for realism

🛠 Customization Ideas:

• Add day/night transition with global light

• Show weather, country borders, or city markers

• Animate rotation over time

• Use mouse hover to display location info