Lunar Frontier

Lunar Frontier is an interactive 3D web experience developed as a school assignment for the course Technology 3. The assignment was to build a 3D map of a self-chosen location where users could explore the environment and discover things. I chose a futuristic moon base and built it out entirely myself.

The experience lets users freely navigate around the moon base using intuitive camera controls and a live minimap. They can click on locations to learn more, trigger a physics-based meteor impact, and explore the base at their own pace. The entire 3D world was built using React Three Fiber, Rapier Physics and GSAP, and the main models were created in Blender.

This project came with two major challenges.

The first was creating the 3D models. This was the first time I modelled my own complex assets in Blender, before this project I had only followed a few tutorials. The lunar surface, the habitat, the rocket tower and the launch platform were all modelled from scratch. It took a significant amount of time but taught me a lot.

The second challenge was navigation and interaction. I wanted to give users as much freedom as possible to explore the base without being able to glitch through the map or drift too far away. I solved this by keeping zoom-to-cursor enabled for freedom of movement, clamping the zoom range, and automatically resetting the rotation back to the center when zooming out. For interacting with the 3D models I used name-based filtering on the scene to target individual objects, and placed custom hitboxes around each location to keep clicking accurate.

I am very happy with the end result, especially the atmosphere of the experience. The combination of the music, the environmental lighting and the UI gives the web experience the calm yet technologically advanced feel I had in mind. The live radar also turned out well.

Two things I would do differently: the way of clicking on a location, currently via double-click, I would replace with clickable tags that appear on hover. And the lunar surface itself could be more realistic. This project was also my first real introduction to React Three Fiber, Rapier and GSAP, and taught me a great deal about both 3D modelling and building interactive web experiences.