Amongus in 3D

Amongus in 3D demo display

React

NextJS 12

Spline

Purpose

If the name was not an indicator already, this project was a joke just to build something in two days. I really wanted to learn Spline the modeling tool and decided that Among Us should be created in 3D.

Lore

I stumbled upon Spline off of a random Instagram post showing off how accessible creating 3D websites are with it and it caught my attention. After some time I was thinking about workshops I should host for the ACM club I am apart of when I remembered about this. I decided to set some constraints and figure out how fast I can make a 3d website so I locked myself in my room until I finished. It took me about 2 hours to make a modest model of an Among Us astronaut and a day for the website aspect. The website process was a bit goofy mainly on my part but I saw the potential of this and how approachable Spline makes building these 3D projects. Recognizing that made me realize that I need to shill this software everywhere I go which is why this project is on my portfolio.

Challenges

As previously mentioned, this project was a half-baked attempt in making a quick 3D website that I can show people. Understanding how to model was definitely a bit tricky since I had no prior experience but I was fast to learn with their user friendly UI.

The part I struggled on was the website, more specifically how to add a loading spinner so that it stops when the model finishes loading. It was a pain to figure it out but after some very important lessons I managed to have it work, for the most part.

The loading spinner is still present once the model loads because I did not read the documentation correctly but if I were to fix it then it would be flawless, trust me.

Fun Fact

It took me a day of useless googling and stack overflow searches to find out that the answer I was looking for was in the documentation of the API.