This is a submission for the Weekend Challenge: Earth Day Edition.
🌍 What I Built
TerraLens is an interactive, visually stunning 3D Earth visualization combined with an AI-powered environmental storytelling experience.
For Earth Day, I wanted to build something that doesn't just show sterile data on a static dashboard, but actually connects people emotionally to the challenges our planet faces.
With TerraLens, you can rotate and explore the globe to discover environmental hotspots (from the Amazon rainforest to the Great Barrier Reef) across four critical dimensions:
- 💨 CO₂ Emissions
- 🌳 Forest Loss
- 🌊 Ocean Health
- 🦋 Biodiversity
When you click on a region's glowing marker, you don't just get a simple pop-up. Instead, Google's Gemini 2.0 Flash steps in as your "Earth Advisor" — dynamically explaining the local environmental dynamics, the specific challenges that region faces, and what positive actions are being taken right now.
"My intended goal was to make environmental awareness immersive, beautiful, and fundamentally optimistic — empowering users to understand our planet and generate their own personalized 'Earth Day Pledges'."
📸 Features & Demo
I've deployed the project live! You can personally experience the 3D interaction here:
The 3D Environmental Globe
The interactive globe allows you to rotate Earth and cycle through different high-importance data layers like CO₂ emissions, the state of the Oceans, and Biodiversity hotspots.
(A high-level view showing the dark, space-glass UI and the emissions layer)
(Switching to the Oceans layer. Notice the animated KPI dashboard at the bottom updating in real-time!)
The "Earth Advisor" AI Chat
By clicking "Ask Gemini", you unlock an interactive environmental storytelling interface. If you click on specific continent hotspots, the spatial mapping feeds that location's data right into Gemini!
(The Gemini sidebar. It generates contextually-aware responses based exactly on what you're interacting with.)
Generate Your Own Earth Pledge
To promote real-world change beyond just looking at a screen, I programmed Gemini to construct highly personalized, realistically actionable Earth Pledges dynamically.
(A personalized, AI-generated pledge modal generated live using the @google/generative-ai SDK!)
💡 Pro Tip: Try deploying it locally and asking the Gemini chat panel to "Generate a personalized Earth Day Pledge" for you!
💻 Code
You can check out the full source code on my GitHub:
🌍 TerraLens — See Your Planet. Shape Its Future.
An interactive 3D Earth visualization with AI-powered environmental storytelling, built for Earth Day 2026.
Explore our planet through an immersive 3D globe showing real environmental data — CO₂ emissions, deforestation hotspots, ocean temperature anomalies, and biodiversity loss. Click on any region and let Google Gemini AI explain the environmental situation and suggest actionable steps.
✨ Features
- Interactive 3D Globe — Rotate, zoom, and explore Earth with realistic rendering using Three.js
- Environmental Data Layers — Toggle between CO₂ emissions, deforestation, ocean health, and biodiversity
- AI Environmental Advisor — Powered by Google Gemini, get personalized insights about any region
- Real-Time Stats Dashboard — Animated environmental statistics from public datasets
- Earth Day Pledges — Generate personalized sustainability commitments
- Responsive Design — Works beautifully on desktop and mobile
🛠️ Tech Stack
| Technology | Purpose |
|---|---|
| Three.js | 3D globe rendering with custom shaders |
| Google Gemini API | AI-powered |
🛠️ How I Built It
TerraLens is a completely frontend-driven application built for speed and immersion. Here is the technical breakdown:
-
The Core Environment: I used
Vite+ vanillaJavaScriptandCSSto keep the bundle as light and blazing-fast as possible. -
The 3D Globe: I used
Three.jsdirectly to map out custom procedural earth textures, atmosphere shaders, glowing hotspot markers, and the dynamic starfield. Creating a realistic day/night cycle and atmospheric glow required some very careful tweaking of theShaderMaterial! -
The UI Experience: Beautiful, smooth "glassmorphism" panels implemented purely with vanilla CSS variables and
backdrop-filterto give it a premium, futuristic look. - The Data: I manually compiled real datasets from public sources like the Global Forest Watch, NASA, and the IUCN Red List. This is structured as a static JSON for zero-latency lookups on the frontend.
🧠 The Hardest Part
The biggest technical challenge was seamlessly connecting the spatial UI (the 3D globe) with the conversational UI.
Clicking a hotspot creates a direct handoff to the Gemini chat panel. To make this work, the app dynamically injects the selected region's environmental data into a hidden system prompt to guide the AI's response format before presenting it to the user.
🏆 Prize Categories
I am proudly submitting this project to the following prize category:
-
Best Use of Google Gemini ✨: To bring the data to life, I deeply integrated the
@google/generative-aiSDK. I used a highly tuned system prompt that instructs Gemini to be an encouraging, optimistic "Earth Advisor".
It receives hidden context about the specific region the user clicks on, formatting the structural JSON data into engaging, human-readable narratives. Crucially, it also has the programmatic capability to generate actionable, localized Earth Day pledges for users based on their chat inputs. It turns TerraLens from a passive encyclopedia into an active conversation!
Thank you for checking out TerraLens, and Happy Earth Day! Let's shape a better future together. 🌍💚
Top comments (0)