All projects · UI Components & Interactions
GlobeTravel: Interactive 3D Travel Globe
A cinematic travel agency landing page built around a realistic Three.js Earth.
A cinematic travel agency landing page built around a realistic Three.js Earth. Visitors drag and pinch the planet, fly the camera to 12 destinations placed by real latitude and longitude, plan multi-city trips drawn as animated great-circle flight paths with a small aircraft, and open holiday cards with photos, prices and a Book Holiday flow.
- lat/lon → 3D conversion (φ = 90° − lat, θ = lon + 180°) matching the sphere's UV convention, so every pin sits on the right coastline
- Single-pass Earth shader: day/night blend, glowing city lights on the night side, ocean glint from the roughness channel, height-map bump, drifting cloud shadows and a sunset-tinted atmospheric rim
- Day, Night and Live lighting modes; Live puts the sun over the real subsolar point for the current UTC time
- Click a 3D marker, an HTML pin, a list item or search (Enter) to fly the camera along the shortest quaternion slerp; idle auto-rotate resumes after 5 s
- Multi-city trip builder: great-circle arcs lifted by distance with animated dashes, draw-in head and a low-poly jet following the newest leg; running km total
- Destination cards with Wikimedia Commons photos (credited), rating, inclusions, flight time and distance from London LHR, favourites, Add stop and a demo booking dialog
- Responsive: floating glass panels on desktop, stacked globe + chip scroller + card at 390 px; 2K textures, capped DPR and paused rendering off-screen keep it smooth on phones
Built with: Three.js r169, custom GLSL ShaderMaterial, OrbitControls, quaternion slerp camera, Vanilla JavaScript