Planet Hop

Homepage
Intro screen
Mercury
Mars
Planet selection page
Climate action resources
VR headset controls
VR headset simulation

Inspiration

💡 The Spark: Watching our younger sibling struggle with climate change lessons that felt disconnected from his life.

🚀 The "Aha!" Moment: We realized kids today are digital natives who learn best through interactive experiences, not just textbooks.

🎯 The Lightbulb: What if we could make learning about Earth's uniqueness as exciting as playing a game?

What It Does

Planet Hop is a free interactive 3D space adventure accessible on browser, mobile, and VR headsets that helps children ages 8–14 learn about the solar system and why protecting Earth matters.

Through a short story-driven journey, players explore each planet, discover why most are unsuitable for human life, and ultimately learn why Earth is uniquely valuable.

Aligns with UN SDG 4 - Quality Education and UN SDG 13 - Climate Action

Key Features:

Immersive 3D Solar System Exploration: Built with Three.js, players can explore a fully interactive 3D solar system with rotating planets and realistic textures based on NASA imagery, making space science visually engaging and easier to understand.
Cross-Platform Web + VR Experience: Planet Hop runs in the browser on laptops and phones and includes an “Enter VR” mode for compatible headsets, allowing players to stand inside the solar system and experience the story in immersive 3D.
Accessible and Inclusive Learning Design: The experience is designed to be accessible and inclusive, with screen reader support, keyboard navigation, high-contrast visuals, bilingual language support (English and Spanish) depending on browser language settings, responsive design, and links to real-world climate action resources at the end of the journey.

4-Line Problem Frame

User: Children ages 8–14 learning about science and the environment.

Problem: Climate change and planetary science are often taught in ways that feel abstract and hard for kids to connect with.

Constraints: The solution must be engaging, easy to access in classrooms or at home, and work across browser, mobile, and optional VR devices.

Success Test: Success is measured by three indicators:

The percentage of players who complete the solar system journey and select a potential future planet.
The percentage of players who explore or commit to a climate action resource presented at the end of the game.
The percentage of players who correctly identify why Earth is uniquely habitable after finishing the experience.

Successful outcomes mean players leave the experience with increased curiosity about science, a better understanding of planetary environments, and greater awareness of everyday climate actions they can take.

3 Line Pitch

Headline: A Space Adventure with a Climate Mission

Subhead: A cross-platform interactive experience where kids explore the solar system, learn why Earth is unique, and discover simple ways to protect our planet.

CTA: Explore

How We Built It

Frontend: Three.js (3D engine), HTML/CSS/JavaScript, Vite (build tool)
Audio: Howler.js for immersive sound effects and music
VR: WebXR for headset compatibility
Controls: OrbitControls for smooth camera movement
Deployment: Vercel for instant hosting and sharing

Challenges We Ran Into

VR Headset Testing: We don't own VR headsets!

Solution: Used Immersive Web Emulator Chrome extension for testing
Result: Full VR functionality without expensive hardware

Mobile Responsiveness: Touch interactions were tricky

Solution: Custom touch event handling and mobile-specific layouts
Result: Smooth experience on phones and tablets

Planet Realism: Textures looked blurry

Solution: Optimized texture loading and increased anisotropy settings
Result: Crisp, realistic planet visuals

Accomplishments That We're Proud Of

Complete VR Experience: Built a fully functional VR space adventure

3D planets with realistic textures and rotation
Interactive controls for headset navigation
Immersive starfield and lighting effects

Accessibility: Didn't just add accessibility as an afterthought

Screen reader support for all interactive elements
Full keyboard navigation
High-contrast visuals and clear typography

What We Learned

Three.js and WebXR Development
Balancing visual appeal with performance
Making technology inclusive from the start
Creating project documentation such as Decision Log, Risk Log, Evidence Log

What's Next for Planet Hop

Advanced Interactions: Add ability to enter planets, launch satellites, and interactive voice narration
Additional Language Support: Expand beyond English/Spanish to include more languages
Educational Analytics: Track learning outcomes and engagement metrics to measure against our success test