3D
HIC Virtual Campus — 3D Campus Map
Project overview
For Designprojekt 1 during my IT & Design bachelor's degree, I wanted to make finding your way around campus easier. The area connects TH Lübeck, Universität zu Lübeck and the MFC, with building names that can be confusing: TH C.4 and Uni C4 are different places. My idea was a browser-based 3D map that makes buildings recognisable and helps you find where you need to go.
- Context
- University project · Designprojekt 1 · IT & Design, TH Lübeck
- My role
- Concept, 3D Modelling & Web Development
- Year
- 2026
- Team
- Lasse Linow · deployment and backend support: Max Sternitzke
- Software
- blosm
- SimpleBake
- React Three Fiber
- Methods
- 3D modelling, Real-time 3D, Interface prototyping, GPS mapping, Route planning
My contribution
I developed the concept, prepared and completed the campus model in Blender, and built the interactive frontend. I also worked on building search, GPS positioning and navigation. Max Sternitzke supported the deployment and backend setup.
Process
I first tried modelling buildings manually using satellite imagery as a reference. That was too slow for the size of the campus, so I switched to OpenStreetMap data imported with blosm in Blender. Missing buildings, including large parts of the UKSH and the library, still needed manual work. I kept the buildings white, aiming for the look of a paper architectural model.
The imported roads overlapped and flickered when viewed in 3D. After trying several ways to clean up the geometry, I gave different road types small height offsets. That solved the visible overlap without rebuilding the whole road network.
Getting the lighting right in the browser took a lot of experimenting. I tried baking shadows and ambient occlusion into textures in Blender with SimpleBake. One export grew to over 700 MB and caused browser memory problems. I eventually chose simpler white geometry over that baked version, so the map could stay usable. This was a useful lesson in balancing the visual idea with the limits of real-time 3D.
I moved from plain Three.js to React Three Fiber and built the interface around the model. Clicking a building marker focuses the camera and opens its information card. Search includes building names, people and courses, while tags connect related information. The frontend reads the building data from a PostgreSQL database through FastAPI.
For GPS positioning, I calibrated real-world coordinates against points in the 3D model. Navigation uses OSRM for walking, cycling and driving routes. Some campus shortcuts were missing from its street network, so I combined those routes with a custom network of campus paths. That also lets a walking route use shortcuts such as the passage through the Bauforum.
Result
A working browser-based campus map with building information, search, GPS positioning and route planning. You can try the live map yourself. I learned a lot about 3D for the web, geographic data and interface development while building it. The project also gave me a foundation I would like to keep developing for the campus.
Project Gallery
1 of 4
NEXT PROJECT