3D
HIC Virtual Campus — 3D-Campuskarte
Projektüberblick
Für Designprojekt 1 in meinem IT-&-Design-Bachelor wollte ich die Orientierung auf dem Campus einfacher machen. Das Gelände verbindet die TH Lübeck, die Universität zu Lübeck und das MFC. Dabei können Gebäudebezeichnungen verwirrend sein: TH C.4 und Uni C4 sind unterschiedliche Orte. Meine Idee war eine browserbasierte 3D-Karte, auf der man Gebäude wiedererkennt und herausfindet, wo man hinmuss.
- Kontext
- Hochschulprojekt · Designprojekt 1 · IT & Design, TH Lübeck
- Meine Rolle
- Konzept, 3D-Modellierung & Webentwicklung
- Jahr
- 2026
- Team
- Lasse Linow · Deployment und Backend-Unterstützung: Max Sternitzke
- Software
- blosm
- SimpleBake
- React Three Fiber
- Methoden
- 3D-Modellierung, Echtzeit-3D, Interface-Prototyping, GPS-Koordinatenzuordnung, Routenplanung
Mein Teil
Ich entwickelte das Konzept, bereitete das Campusmodell in Blender auf und ergänzte es. Außerdem setzte ich das interaktive Frontend um und arbeitete an Gebäudesuche, GPS-Positionierung und Navigation. Max Sternitzke unterstützte das Deployment und die Einrichtung des Backends.
Vorgehen
Zuerst versuchte ich, die Gebäude anhand von Satellitenbildern von Hand zu modellieren. Für die Größe des Campus war das zu langsam. Deshalb wechselte ich zu OpenStreetMap-Daten, die ich mit blosm in Blender importierte. Fehlende Gebäude, darunter große Teile des UKSH und die Bibliothek, musste ich weiterhin manuell ergänzen. Die Gebäude hielt ich weiß, angelehnt an ein Architekturmodell aus Papier.
Die importierten Straßen überlappten sich und flackerten in der 3D-Ansicht. Nach mehreren Versuchen, die Geometrie zu bereinigen, versetzte ich unterschiedliche Straßentypen leicht in der Höhe. So konnte ich die sichtbaren Überlagerungen beheben, ohne das gesamte Straßennetz neu zu bauen.
Die Beleuchtung im Browser erforderte viele Experimente. Mit SimpleBake in Blender versuchte ich, Schatten und Ambient Occlusion in Texturen zu backen. Ein Export wurde über 700 MB groß und verursachte Speicherprobleme im Browser. Am Ende entschied ich mich für die einfachere weiße Geometrie, damit die Karte benutzbar blieb. Dabei lernte ich viel darüber, eine gestalterische Idee mit den Grenzen von Echtzeit-3D abzuwägen.
Ich wechselte von reinem Three.js zu React Three Fiber und baute die Oberfläche um das Modell herum auf. Ein Klick auf einen Gebäudemarker richtet die Kamera darauf aus und öffnet die zugehörige Infokarte. Die Suche umfasst Gebäudenamen, Personen und Lehrveranstaltungen; Tags verknüpfen zusammengehörige Informationen. Das Frontend liest die Gebäudedaten über FastAPI aus einer PostgreSQL-Datenbank.
Für die GPS-Positionierung glich ich reale Koordinaten mit Punkten im 3D-Modell ab. Die Navigation nutzt OSRM für Fuß-, Fahrrad- und Autorouten. Einige Abkürzungen auf dem Campus fehlten im Straßennetz. Deshalb kombinierte ich diese Routen mit einem eigenen Netz aus Campuswegen. So kann eine Fußroute auch Abkürzungen wie den Durchgang durch das Bauforum nutzen.
Ergebnis
Eine funktionierende Campuskarte im Browser mit Gebäudeinformationen, Suche, GPS-Positionierung und Routenplanung. Du kannst die Live-Karte selbst ausprobieren. Dabei habe ich viel über 3D im Web, Geodaten und die Entwicklung von Benutzeroberflächen gelernt. Das Projekt ist außerdem eine Grundlage, die ich gerne für den Campus weiterentwickeln möchte.
Projektgalerie
1 von 4
NÄCHSTES PROJEKT