Inspiration
It started with the joke "let's run Dijkstra on the school" (aka find the shortest path).
What it does
It renders a 3D model of the first two floors of Winston Chung Hall with small people walking around. You can watch people wander around the halls. There is also the option to see yourself wander the halls or to see how to get from one room/place to another.
How we built it
We use P5.js to create a tool that could map out the building. We use Three.js and React to build the rendering. Joshua used Blender to create the people models.
Challenges we ran into
So many errors, we just disabled linted. React immutability was difficult to deal with. Deploying to production is completely broken. (It must be run locally). (This has been fixed somewhat :tada:). 3D is especially difficult to work with, and trying to map out the entire WCH took a while, as well as developing a tool that would allow us to better map out other locations if we expand the map. GPS location is also difficult to pin down as it is not very accurate, especially for such a small area.
Accomplishments that we're proud of
It works! There is a graph traversal algorithm for finding a path between rooms (and locating staircases to go between floors), and an option that makes the entire map glow for no reason :D
What we learned
3D is still hard.
What's next for 3D Model of Winston Chung Hall
Improve the map editing tooling! Add multiple buildings and more floors and room detail.
How to use
Navigation: Zoom: Scroll Pan: Left Click and Drag Rotate: Right Click and Drag
Computer Features: NPC Roam: Default - See 100 students wander the halls of Winston Chung Hall. Hide Floor: Click on floor and hold - Temporarily hides the floor you click on. Pathfinder: Spacebar - After pressing spacebar, you will be prompted for the name of two locations on the map. After entering the two location names, all NPC models will disappear and there will be one player model that walks from the starting location to the ending location and shows you how to get there. NEON MODE: = - After pressing "=", goes into neon theme.
Mobile Features: Tracker: Default - See where you are on the map
Built With
- p5.js
- pixi.js
- three.js
- typescript
- vite
Log in or sign up for Devpost to join the conversation.