globe-travel

Inspiration

I know a lot of people just want to travel across the world, but they are held back by limitations like time, money, and fear. As a woman, that fear is a real barrier for me—the world isn't always as accessible as we’d like it to be. I wanted to create a digital escape where anyone can "fly" anywhere in seconds. What if I could just create a simulation of Earth and turn global exploration into a game? That was the spark for Globe Traveler.

What it does

Globe Traveler is an interactive 3D Reddit experience. Users are presented with a realistically rotating Earth. With a single click, they "land" on a random set of coordinates. The game identifies the country using real-world geolocation data and challenges the user to predict the local time in that specific part of the world. It’s a mix of geography, math, and time-traveling fun.

How we built it

The game is built using the Devvit Webview platform.

• The Engine: I used Three.js to render a high-fidelity 3D sphere with custom lighting and starfield environments.
• The Logic: I implemented a Raycasting system to translate 2D mouse clicks into 3D spherical coordinates.
• The Data: I integrated the @rapideditor/country-coder library to map those 3D coordinates to real-world country names and calculated time zone offsets based on longitude.
• The UI: A custom HTML/CSS overlay designed with Reddit’s orange-and-dark theme provides a seamless "HUD" (Heads-Up Display) experience.

Challenges we ran into

The biggest hurdle was the Content Security Policy (CSP). Reddit’s environment is incredibly secure, which initially blocked my inline scripts and event handlers. I had to pivot from using traditional onclick attributes to a more robust, programmatic addEventListener approach. Additionally, calculating the exact longitude on a rotating globe was a mathematical puzzle—I had to write logic to "counter-rotate" the click based on the Earth's current axis position.

Accomplishments that we're proud of

I am incredibly proud of the Geolocation Bridge. Getting a 3D canvas to communicate with a 2D UI layer and then mapping that to a real country's borders felt like magic. As a female developer, finishing this project and overcoming those complex math and security barriers feels like a huge win for my technical confidence.

What we learned

I learned a massive amount about Linear Algebra and spherical geometry! Beyond the math, I learned how to work within the constraints of a restricted web environment like Devvit. I also discovered how to optimize 3D assets so they run smoothly within a social media app without lagging the user's feed.

What's next for globe-travel

The world is huge, and I’ve only just started! My next steps include:

• Redis Leaderboards: Saving user "Time-Travel Streaks" so Redditors can compete for the top spot.
• City Lights: Adding a "Night Texture" that glows with city lights on the dark side of the globe.
• Educational Facts: When you land in a country, the game could share a cool "Reddit Fact" about that culture or its history.

Built With

• csp
• css
• html5
• raycaster
• reddit
• three.js
• typescript
• vite