3D Virtual Gallery

Menu
Basic 3D gallery view
Vaporwave gallery theme 2
Vaporwave gallery theme
CockroachDB
Bash console showing our data

Inspiration

Not being able to attend hack Sheffield in real life was a disappointment. But we made the best of it and created our own virtual world to bring peoples projects and efforts together in an easily accessible online gallery!

What it does

It drops you into a virtual world that is user controlled with walking and jumping physics. You can view the images on display and switch to a V A P O R W A V E theme to have a great the experience.

How we built it

It was built using JavaScript as the core. Along with the 3D model library, Three.js. Images are displayed from a cockroach DB SQL database, Html and CSS handle the menu screens and UI and a little bit of backend logic generates the environment.

Challenges we ran into

We ran into many challenges such as learning about clusters and setting up a cockroach database.

Integration of physics and the mathematics behind object in the virtual world had taken many long hours to solve.

But in the end we are proud we could create something this grand.

Accomplishments that we're proud of

The theme switching really provides a fun twist on the project and we are proud that it is quite seamless with minimal hiccups as it runs with a smooth frame rate.

We are also very proud of how the vaporwave theme turned out, even though it's not very easy to work on 3D environments in JavaScript.

What we learned

Personally, I have learned how to work with MAMP to setup a locally hosted environment, but overall it really helped me to understand how 3D environments work in browsers.

We have never used physics and 3d libraries and thinking about how objects interact and writing code that dramatically impacts the environment was a really great learning opportunity

Creating our own SQL server with cockroach DB has also been a new learning opportunity. We normally resort to NoSQL databases so this has also been a really great learning experience.