Projektbeispiel · Moderne Web- und 3D-Integration

Interaktiver Wohnungsnavigator – von der 3D-Auswahl bis zur Detailansicht

Für ein Immobilienprojekt entstand ein wiederverwendbarer browserbasierter Wohnungsnavigator, der interaktive 3D-Auswahl mit Wohnungsliste, Filtern, Varianten, Grundrissen und Detailinformationen verbindet.

Das Widget ist für Desktop und Mobile ausgelegt, lässt sich gekapselt in bestehende Websites einbetten und kann seine Projektdaten und Assets auch domainübergreifend laden.

Interaktiver Wohnungsnavigator mit 3D-Gebäudedarstellung, Filtern und Wohnungsdetails

3D, Fachlogik und Website-Integration in einem Widget

Die 3D-Darstellung ist nicht nur eine Visualisierung: Wohnungen können direkt im Gebäude ausgewählt werden. 3D, Liste, Detailansicht und öffentliche Widget-API greifen auf denselben zentralen Zustand zu, damit Auswahl, Filter, Varianten und Status konsistent bleiben.

Die technische Umsetzung umfasst Vue 3, TypeScript, Vite, Pinia, Three.js und Gaussian Splat sowie eine Shadow-DOM-Kapselung für die sichere Einbettung in fremde Websites. Architektur, Datenmodell, Responsive-Verhalten, Cross-Domain-Integration, Testing, Debugging und Deployment lagen in meiner technischen Verantwortung.

Was das Projekt technisch zeigt

Vue-3-/TypeScript-Frontend mit zentralem Pinia-Zustand für Auswahl, Filter, Sortierung, Ansichten und Projektwechsel.

Interaktive 3D-Auswahl mit Three.js, Gaussian Splat und separaten GLB-Geometrien für Mapping und Selektion.

Synchronisierung von 3D, Wohnungsliste, Detailansicht und öffentlicher JavaScript-API ohne parallele Zustände.

Einbettbares IIFE-Widget mit eigenem Shadow DOM zum Schutz vor CSS-Konflikten mit der Hostseite.

Responsive Desktop- und Mobile-Oberflächen sowie Cross-Domain-Laden von Widget, Projektdaten und Assets.

Projektvalidierung, 12 Regressionstests, TypeScript-Prüfung und Build-Verifikation als fester Teil des Produktionsbuilds.

Ähnliche Web-, Integrations- oder 3D-Aufgabe geplant?

Wenn eine bestehende Website, Fachanwendung oder Visualisierung um eine moderne interaktive Oberfläche ergänzt werden soll, können wir den sinnvollen technischen Ansatz zuerst unverbindlich klären.

Kostenlose Ersteinschätzung