DEV Community

Cover image for 🌍 How I Built a Real-Time 3D Earth That Knows Where You Are — In Just One Weekend
Raj Aryan
Raj Aryan

Posted on

🌍 How I Built a Real-Time 3D Earth That Knows Where You Are — In Just One Weekend

Image description

Imagine a website that loads a live, glowing Earth… then immediately points to where you are in the world — in real time.

That’s exactly what I built last weekend using JavaScript, Globe.gl, and a bit of UI magic.

🔗 Live Project & GitHub

🚀 The Goal

I wanted to build a lightweight, modern, and interactive 3D Earth that:

  • Rotates in real time
  • Shows your live location
  • Looks clean and stylish (glassmorphism FTW 💎)
  • Can be used as a portfolio feature, landing page, or just a cool visualization

🛠️ Stack & Tools

Tool Purpose
Globe.gl 3D Earth visualization (built on top of Three.js)
HTML/CSS UI + layout
JavaScript Logic + geolocation
Netlify Deployment

🧱 Step-by-Step Breakdown

1. Set Up the Globe 🌎

I started with Globe.gl, which makes it super simple to render a fully interactive 3D globe with bump mapping and atmosphere.

const world = Globe()(document.getElementById('container'))
  .globeImageUrl('earth-dark.jpg')
  .bumpImageUrl('earth-topology.png')
  .showAtmosphere(true)
  .atmosphereColor('#3a228a')
  .backgroundColor('#000');
Enter fullscreen mode Exit fullscreen mode

One line of setup = fully functional Earth.

2. Add Geolocation 📍

Next, I used the browser's native navigator.geolocation API to fetch the user’s live latitude and longitude.

navigator.geolocation.getCurrentPosition(position => {
  const { latitude, longitude } = position.coords;
  addMarker(latitude, longitude);
});
Enter fullscreen mode Exit fullscreen mode

If permissions were denied, I defaulted to New Delhi.

Then, I mapped those coordinates to the globe and added a red point marker using Globe.gl's .pointsData() method.

3. Add a Modern UI with Glassmorphism 🧊

I styled the navbar and footer using backdrop-filter and translucent RGBA backgrounds to create a glassmorphism effect.

nav {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.05);
}
Enter fullscreen mode Exit fullscreen mode

The result? Clean, modern, and layered UI — and no external UI libraries needed!

4. Sign It Like a Developer-Artist ✍️

To make the project feel more personal, I added a floating signature in cursive font at the bottom right.

<div class=\"signature\">Er Raj Aryan</div>
Enter fullscreen mode Exit fullscreen mode 
.signature {
  font-family: 'Great Vibes', cursive;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.15);
  transform: rotate(-10deg);
}
Enter fullscreen mode Exit fullscreen mode

It’s subtle. But trust me — it leaves a lasting impression.

✨ Final Result

  • ✅ Real-time location detection
  • ✅ 3D rotating Earth
  • ✅ Atmosphere & lighting
  • ✅ Glassmorphism UI
  • ✅ Floating signature watermark

📦 What You Can Build With It

This isn’t just eye candy. This project can be the foundation for other ideas like:

  • Live website visitor tracking (with server-side data)
  • Geolocation-based portfolio
  • Day/night zone simulation
  • 3D story-driven landing page

📘 What I Learned

  • High-level libraries like Globe.gl save time and headaches
  • CSS details matter (glassmorphism was a win here)
  • You don’t need React or Vue for every project
  • Finishing touches (like a signature) make your work memorable

🌐 Try It Yourself

🎯 Live Demo: https://realtime-geo.netlify.app
📁 GitHub: https://github.com/er-raj-aryan/realtime-geo

🧠 Got Feedback?

I’d love to hear your thoughts — or see your remixed version of this. Fork it, tweak it, and tag me if you do something cool!

And if you liked this breakdown, consider following me here for more front-end experiments like this. 🙌

Top comments (0)