Ein Konfigurator macht aus einem Produkt mit vielen Optionen etwas, das man ansehen, drehen und verändern kann, und am Ende steht eine Konfiguration, mit der sich weiterarbeiten lässt: eine Offertanfrage, eine Bestellung oder ein gespeicherter Link.
Er ist zu gleichen Teilen Gestaltung, 3D-Produktion und Software. Die Szene muss stimmen, die Bedienung muss ohne Anleitung verständlich sein, und die Optionen, Regeln und Preise dahinter müssen korrekt sein.
Was wir liefern
- 3D-Viewer in Echtzeit mit Drehen und Zoomen
- Auswahl von Material, Farbe und Oberfläche
- Optionslogik mit zulässigen Kombinationen
- Preisberechnung oder Offertanfrage, wo machbar
- Modellaufbereitung und Optimierung für das Web
- Abstimmung für Smartphones und statische Ersatzbilder
- Speicherbare und teilbare Konfigurationen
- Anbindung an CRM, Offertprozess oder Warenkorb
Technologie & Umsetzung
Wir bauen Konfiguratoren mit Three.js, über React Three Fiber in einer Next.js-Website, in Echtzeit gerendert mit WebGL. Die Modelle werden in Blender aufbereitet, als glTF oder GLB exportiert, komprimiert (etwa mit Meshopt) und mit Texturen in webtauglicher Grösse versehen. Schwere Dateien werden erst geladen, wenn sie gebraucht werden, zum Beispiel nachdem jemand ein Modell gewählt hat.
Auf dem Smartphone passt sich die Szene an: Die Auflösung sinkt, wenn die Bildrate sinkt, Effekte werden vereinfacht, und wo WebGL fehlt oder reduzierte Bewegung eingestellt ist, erscheint ein statisches Bild. Ziel ist ein Konfigurator, der auf einem Mittelklasse-Smartphone schnell öffnet, nicht nur auf dem Studiomonitor.
Hinter der Szene stehen die Produktdaten: welche Optionen es gibt, welche Kombinationen zulässig sind, was jede kostet. Bei einem kleinen Sortiment liegen sie in der Website, bei einem grösseren kommen sie aus einem CMS, einem PIM-System oder dem Shop. Eine fertige Konfiguration kann an ein Offertformular gehen, per Webhook an ein CRM oder in den Warenkorb.
Ablauf
Optionen und Regeln
Zuerst wird die Produktlogik festgehalten: Optionen, Abhängigkeiten, Preise.
Prüfung der Daten
Gelieferte Modelle oder CAD-Daten werden geprüft, und es wird geplant, was neu gebaut werden muss.
Look Development
Materialien und Licht, abgestimmt auf Referenzfotos des echten Produkts.
Umsetzung und Tests
Bedienung, Logik und Integrationen, getestet auf den Smartphones, die Ihre Kundschaft tatsächlich nutzt.
Anwendungsbeispiel
Ein illustratives Szenario, keine Beschreibung eines abgeschlossenen Projekts.
Ein Fahrzeugaufbereiter lässt Kundinnen und Kunden Lackschutzfolien in verschiedenen Ausführungen erkunden und auf Basis von Fahrzeug und Konfiguration eine Offerte anfragen.