Phoghorn

Inspiration

Lost in engineering during freshman year? Hard time giving others directions?

What it does

Pathfinding, marking notable locations (student lounge, study spots, vending machines, water, printers, etc.)

How we built it

We built Phoghorn on a React + Vite frontend with Three.js and React Three Fiber handling the 3D rendering. Our campus model was constructed in Blender and exported as a .glb, with every door and point of interest named according to a convention (door_101, poi_lounge_1) that lets our raycasting system identify exactly what the user clicked. Clicking a node fires a Three.js raycast, resolves the mesh name, and renders a Drei Html popup at that world position with contextual actions. Floor navigation is handled by a radial selector that drops into the scene on click. State is managed globally with Zustand. Room metadata and the walkable node graph are stored in Supabase, and pathfinding between rooms uses Turf.js to compute routes which are then visualized as tube geometries overlaid on the model. The app is self-hosted on a Raspberry Pi behind an Nginx reverse proxy with a Cloudflare tunnel for public access.

Challenges we ran into

The biggest challenge was understanding the scope of our project, as a full indoor map of a large building like LEEP2 is no small feat. Getting the Blender model's coordinate space to align perfectly with Three.js world coordinates took significant iteration.

Accomplishments that we're proud of

We shipped a working interactive 3D campus map in a single hackathon session. The radial floor selector feels genuinely polished, and the mesh-name-to-database bridge pattern we landed on is clean enough that adding new rooms or POIs requires zero code change, just model updates.

What we learned

We not only learned a lot about working in a team, but also about organizing our ideas and managing our development. We really learned the importance of knowing exactly what you want for your MVP!