Inspiration

Browsing the NASA website and being able to explore the different planets, and there was a 3D model of a planet that I could explore. I wondered if I could make an immersive experience that can allow users to explore space from the comfort of their own home.

What it does

An interact-able 3D website that allows users to explore the planets and collect data by performing tasks. The data collected about planets are stored and can be accessed at any time. The user is in the first person view and is a pilot flying through the void of space.

How we built it

Using React three fiber and GSAP to blend 3D and 2D ui elements together. The model was created by hand in blender, and camera controls and lighting were added to it in React. Then the UI is set over the 3D canvas which allows for interactivity.

Challenges we ran into

A lot of issues came from dialogues not showing the correct text so this was solved by creating a dialogue system that relied on knowing the current planet and keeping track of the dialogue index.

Accomplishments that we're proud of

The project overall, adding all the elements together to create that immersive space exploration experience. Being able to replicate a space ship style vibe with the hologram styling and ambience sound effects really made sitting in that cockpit just a bit more realistic.

What we learned

How to combine 3D and UI elements to create web interactivity, as well as adding sound and animations for a more engaging user experience.

What's next for The Voyage

Adding the rest of the planets, more ways to collect data, and maybe even expanding further than the solar system.

Built With

Share this project:

Updates