[Alle Projekte](https://88lab.eu/de/portfolio/) 3D-BOUTIQUE / DEMOKONZEPT # Maison Éline Eintreten. Aus jedem Blickwinkel entdecken. [Website besuchen](https://88lab.eu/boutique/) Three.js / WebGL 3D-Produkte Virtuelles Shopping  Echtes Projekt aus dem 88Lab-Portfolio · Maison Éline 01 / KONTEXT UND AUFGABE ## Eintreten. Aus jedem Blickwinkel entdecken. Die Aufgabe Wir wollten zeigen, wie ein **Onlineshop** das Gefühl eines Boutique-Besuchs vermitteln kann. Der Raum sollte einen eigenen Charakter haben und Produkte aus der Nähe erlebbar machen. Erkunden und Auswählen sollten mit Maus und Tastatur ebenso funktionieren wie per Touch auf dem Smartphone. Die Lösung Wir entwickelten **Maison Éline** als eigenes Demokonzept: einen hellen 3D-Salon mit **drei Bereichen** , interaktiven Produktmodellen und einem separaten Katalog. Besucher können sich frei bewegen, die Atmosphäre verändern, Farbe und Größe wählen und einen beispielhaften Bestellablauf durchgehen. Interieur, Modelle, Oberfläche und Bewegung bilden ein gemeinsames Erlebnis im Browser. ### Eigenes Interieur mit drei unterschiedlichen Bereichen Salon, Lederwarenbereich und Atelier bilden einen gemeinsamen Raum mit Vitrinen, einem zentralen Tisch und Präsentationsflächen. Marmor, Metallakzente, Glas, Textilien und modellierte Blumen prägen die helle Farbwelt. Geometrie und Materialien sind für die **Echtzeitdarstellung** mit **Three.js** und WebGL entwickelt. ### Freie Bewegung am Computer und Smartphone Am Computer bewegen sich Besucher mit **WASD** , Pfeiltasten oder Scrollen und sehen sich mit der Maus um. Auf dem Smartphone steuert ein **analoger Joystick** die Bewegung; eine separate Geste bestimmt die Blickrichtung. Sanftes Beschleunigen und Anhalten, Kollisionen mit Möbeln und Übergänge zwischen den drei Bereichen sorgen für Orientierung. Freie Blicksteuerung und Vollbildmodus ergänzen die Bedienung. ### Wechselndes Licht und Atmosphäre Drei Modi zeigen die Boutique bei Tageslicht, zum Sonnenuntergang und am Abend. Ein **automatischer Zyklus** blendet sanft zwischen ihnen über und verändert Sonnenlicht, Schatten und Innenbeleuchtung. Oberlicht und Reflexionen verstärken die räumliche Wirkung. Eine Fortschrittsanzeige begleitet das Laden und öffnet den Raum automatisch, sobald Texturen und das erste Bild bereit sind. ### Kollektion mit interaktiven 360°-Ansichten Wir erstellten sechs Beispielprodukte: zwei Taschen, ein Kleid, eine Jacke, Parfum und Ohrringe mit insgesamt **16 Farbvarianten** . Jedes Modell lässt sich drehen, vergrößern und aus verschiedenen Blickwinkeln betrachten. Das Produktfenster vereint Farb- und Größenauswahl, Details und das Hinzufügen zum Warenkorb. Der Katalog filtert Taschen, Kleidung und Accessoires; für Kleidung gibt es eine Größentabelle. ### Warenkorb und Demobestellung Gewählte Farbe und Größe bleiben zusammen mit Mengen und Gesamtbetrag in Euro im Warenkorb erhalten. **Lokale Speicherung** bewahrt die Auswahl auch nach dem Neuladen. Bestellübersicht und Demobestätigung zeigen den vollständigen Nutzerweg. Das Konzept nimmt keine echten Zahlungen an, übermittelt keine Bestellungen und verlangt keine persönlichen oder Kartendaten. 02 / WAS WIR GESCHAFFEN HABEN ## Details machen das Ganze - 01 Eigenes 3D-Interieur: Salon, Lederwaren und Atelier - 02 Freie Bewegung und Übergänge zwischen Bereichen - 03 Mobiler Joystick und Blicksteuerung per Touch - 04 Sanfte Bewegung und Kollisionen mit Möbeln - 05 Tag, Sonnenuntergang und Abend mit automatischen Übergängen - 06 Materialien, Reflexionen, Schatten und modellierte Blumen - 07 Sechs 3D-Produkte und **16 Farbvarianten** - 08 **360°** -Drehung, Zoom und Pause der automatischen Bewegung - 09 Kategoriefilter für die Kollektion - 10 Farb- und Größenauswahl mit Größentabelle für Kleidung - 11 Warenkorb mit Mengen, Varianten und lokaler Speicherung - 12 Demo-Bestellübersicht und Bestätigung UMGESETZTE LÖSUNG Eine funktionierende Demo für **virtuelles Shopping** verbindet Atmosphäre, freies Erkunden und konkrete Produktaktionen. Maison Éline zeigt die Möglichkeiten von 88Lab für **individuelle 3D-Oberflächen** und interaktive Web-Erlebnisse **direkt im Browser** . ## Haben Sie ein ähnliches Projekt? [Lass uns reden](https://88lab.eu/de/contact/?service=Plattformen) NÄCHSTES PROJEKT [## VIP Matraci](https://88lab.eu/de/klienti/vipmatraci-bg/)