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.