Produktkonfigurator erstellen: Schritt für Schritt vom Produkt zum 3D-Konfigurator

Wer einen Produktkonfigurator erstellen will, denkt zuerst an das 3D-Modell. Die meisten Probleme entstehen aber früher: bei unklaren Zielen, unvollständigen Produktdaten und Regeln, die nur im Kopf des Vertriebs existieren. Diese Anleitung führt Schritt für Schritt vom Produkt zum fertigen 3D-Konfigurator im Browser – mit den Entscheidungen, die wir bei unseren Demos und im Projekt für ALUXIL getroffen haben, und den Stellen, an denen Projekte typischerweise ins Stocken geraten.

Die Schritte gelten unabhängig davon, ob Sie eine Software-Plattform nutzen oder den Konfigurator individuell entwickeln lassen. Wie Sie zwischen beiden wählen, steht im Artikel Software oder individuell?.

Schritt 1: Ziel und Ergebnis festlegen

Ein Konfigurator ist kein Selbstzweck. Beantworten Sie vor allem anderen drei Fragen schriftlich:

• Wer nutzt ihn? Endkunden im Shop, Fachhändler, der eigene Außendienst oder Besucher auf einer Messe. Händler brauchen Artikelnummern, Endkunden brauchen Klarheit.
• Was ist das Ergebnis? Ein Warenkorb, eine Anfrage an den Vertrieb, eine Stückliste als Datei oder schlicht ein besseres Verständnis des Produkts.
• Woran messen Sie den Erfolg? Zum Beispiel an Anfragen mit vollständiger Konfiguration oder an weniger Rückfragen zu Maßen.

Aus diesen Antworten folgt die Stufe: Reicht eine 3D-Produktansicht zum Drehen und Farbwechseln, braucht es einen 3D-Konfigurator mit Regeln, oder vor allem eine Explosionsansicht, die zeigt, wie das Produkt aufgebaut ist? Wer das hier entscheidet, spart später den teuersten Fehler: Funktionen zu bauen, die niemand braucht.

Schritt 2: Produktdaten sammeln – eine Quelle der Wahrheit

Ein Konfigurator ist nur so richtig wie die Daten dahinter. Legen Sie eine Tabelle an, die alle wählbaren Merkmale enthält:

• Merkmal (z. B. Breite, Farbe, Dacheindeckung)
• Ausprägungen (z. B. 3 m, 4 m, 5 m oder stufenlos von 3 bis 7 m)
• Artikelnummer oder Variantenkennung
• Preis oder Preisregel
• Abbildung oder Muster, falls vorhanden

Wichtig ist, dass es eine Quelle gibt. Wenn der Shop andere Preise kennt als der Konfigurator, wird das irgendwann sichtbar. Im Kundenprojekt für ALUXIL haben wir das so gelöst: Das 3D-Modell hat keine eigenen Optionsknöpfe, es folgt jeder Auswahl in der bestehenden Kaufbox. Größe, Konsole, Dacheindeckung und Farbe kommen aus dem Shop, und deshalb kann das Modell dem Preis nie widersprechen (Fallstudie).

Schritt 3: Regeln aufschreiben, bevor jemand modelliert

Regeln sind der Kern jedes Produktkonfigurators und der häufigste Grund für Verzögerungen. Schreiben Sie sie als einfache Sätze oder als Tabelle auf:

• Abhängigkeit: „Doppelakku nur mit Motor X.“
• Ausschluss: „Verdeck nicht mit Gewerbe-Box.“
• Grenze: „Bandhöhe 800 bis 1000 mm, sonst Warnung.“
• Berechnung: „Reichweite aus Akku, Zuladung und Unterstützungsstufe.“

Unser fiktives Lastenrad KARGO 2 zeigt, wie solche Regeln im Modell wirken: Der Einsatzzweck tauscht Box und Zubehör, die Körpergröße stellt Rahmen, Sattel und Vorbau ein, und unverträgliche Kombinationen werden direkt am Modell erklärt. Die Reichweite ist dort ein vereinfachter Beispielwert, keine Herstellerangabe.

Eigene Demo · fiktives Produkt

Lastenrad KARGO 2

Ein Front-Lastenrad: erst den Einsatz wählen, dann Fahrergröße, Akku und Box – mit Reichweite, Regeln und Stellfläche live im 3D-Modell.

In 3D ansehen →

Zwei Regeln für die Regeln: Jede muss von jemandem freigegeben werden, der das Produkt verantwortet, und jede braucht einen Testfall. „Wählen Sie A, dann darf B nicht wählbar sein“ ist ein Test, den man vor dem Start abhaken kann.

Schritt 4: Das 3D-Modell bauen

Datenquelle prüfen

Es gibt drei Wege zum Modell: aus CAD-Daten der Konstruktion, aus Fotos, Maßen und Zeichnungen, oder aus vorhandenen 3D-Dateien. CAD-Daten sind maßgenau, aber für den Browser meist zu schwer und enthalten Details, die niemand sieht. Ob sie sich eignen, sollte vor dem Start geprüft werden; worauf es dabei ankommt, beschreibt der Artikel Aus CAD-Daten zum Web-3D-Modell. Fotos und Zeichnungen reichen in vielen Fällen aus.

Format und Dateigröße

Für das Web hat sich glTF durchgesetzt, der offene Standard der Khronos Group für die effiziente Übertragung und das Laden von 3D-Szenen; GLB ist die binäre Ein-Datei-Form ^[1]. Die Geometrie lässt sich zusätzlich komprimieren, zum Beispiel mit der Erweiterung EXT_meshopt_compression ^[2]. Setzen Sie sich früh ein Größenbudget (Richtwerte aus unseren Demos stehen im Artikel zu CAD-Daten), denn ein Modell nachträglich zu verkleinern ist mühsamer, als es von Anfang an schlank zu bauen.

Materialien und Licht

glTF beschreibt Materialien physikalisch (Farbe, Metallizität, Rauheit) ^[1]. Damit sie echt wirken, braucht die Szene eine passende Umgebung: Wir beleuchten unsere Demos mit HDRI-Umgebungen und berechnen einfache Studio-Umgebungen nur dort, wo kein HDRI vorgesehen ist. Planen Sie Muster ein, wenn Farben verbindlich sein müssen – eine RAL-Nummer allein sieht auf jedem Bildschirm etwas anders aus.

Varianten im Modell

Feste Varianten (zehn Größen) und stufenlose Maße sind zwei verschiedene Bauweisen. Für stufenlose Maße muss das Modell parametrisch aufgebaut sein: Profile verlängern sich, Teile werden gesetzt oder entfernt. Entscheiden Sie das in Schritt 2, nicht erst hier.

Schritt 5: Die Oberfläche gestalten

Die beste Geometrie hilft nicht, wenn der Besucher die Bedienung nicht versteht. Bewährt haben sich:

• Wenige Optionen pro Schritt und eine sinnvolle Reihenfolge, die der Kaufentscheidung folgt (erst Einsatz, dann Größe, dann Farbe).
• Hinweise am Modell: Ein Klick fährt die Kamera zum Detail und erklärt es.
• Ergebnis immer sichtbar: Preis, Stückliste oder Prüfergebnis neben dem Modell, nicht drei Klicks entfernt.
• Smartphone zuerst denken: Auf kleinen Bildschirmen muss das Modell sichtbar bleiben, während der Besucher durch die Optionen scrollt.

Ein Detail, das oft vergessen wird: Auf dem Smartphone darf das 3D-Modell die Seite nicht „einfangen“. Bei uns scrollt ein senkrechtes Wischen die Seite, ein seitliches dreht das Modell, und Zoomen per Mausrad ist erst aktiv, wenn der Besucher in die Ansicht geklickt hat.

Unser Lichtband-Demo LUMA LINE zeigt eine Oberfläche, bei der das Ergebnis selbst im Bild liegt: Linien auf dem Deckenraster zeichnen, Lichtkegel und Lux-Falschfarben sehen, Artikelnummer und Stückliste als CSV. Die Lux-Werte sind dort eine vereinfachte Abschätzung, keine Lichtplanung.

Eigene Demo · fiktives Produkt

Lichtband LUMA LINE

Ein Lichtsystem-Konfigurator, in dem das Licht selbst das Produkt ist: Linien auf dem Deckenraster zeichnen, Optik und Lichtfarbe wählen – Lichtkegel, Lux-Werte, Prüfungen und Stückliste live.

In 3D ansehen →

Schritt 6: In Website oder Shop integrieren

Es gibt drei übliche Wege:

1. Eigene Seite, die von Produktseite oder Newsletter verlinkt wird.
2. Einbettung mit einem kurzen Code-Schnipsel, unabhängig vom CMS (Optionen im Detail: 3D-Modell in die Website einbinden).
3. Direkte Kopplung an die Kaufbox: Die Konfiguration landet als Variante oder als Eigenschaften der Bestellposition im Warenkorb.

Wenn kein Kauf stattfindet, geht die Konfiguration als Anfrage per E-Mail oder Webhook an den Vertrieb. Tiefere Anbindungen an CPQ-, ERP- oder CRM-Systeme sind eigene Projekte; wir bieten sie nicht als Standard an und prüfen sie im Einzelfall.

Für die Ladezeit gilt: Das 3D sollte die Seite nicht verlangsamen. Google bewertet Seiten unter anderem nach Largest Contentful Paint (gut: bis 2,5 s), Interaction to Next Paint (gut: bis 200 ms) und Cumulative Layout Shift (gut: bis 0,1) ^[3]. Wir laden das interaktive 3D deshalb erst, wenn der Besucher es öffnet; bis dahin zeigt die Seite ein Vorschaubild oder ein kurzes Video, das aus dem echten 3D aufgezeichnet ist. Geräte ohne passende WebGL-Unterstützung behalten das Vorschaubild.

Auch der Datenschutz gehört in diesen Schritt. Liegen alle Dateien auf Ihrem Server, entstehen keine Anfragen an Drittanbieter, und die 3D-Ansicht braucht keinen eigenen Eintrag im Consent-Banner, solange sie keine Cookies setzt.

Schritt 7: Auf echten Geräten testen

Ein Konfigurator, der auf dem Entwickler-Laptop flüssig läuft, kann auf einem drei Jahre alten Mittelklasse-Handy ruckeln. Testen Sie deshalb:

• Geräte: mindestens ein aktuelles iPhone mit Safari, ein Android-Mittelklassegerät mit Chrome, ein Tablet und einen Desktop-Browser.
• Startzeit: vom Tippen auf „3D“ bis zum ersten bewegten Bild.
• Bedienung: Drehen, Zoomen, Scrollen der Seite über dem Modell, Optionen wählen.
• Regeln: jede Regel aus Schritt 3 als Testfall.
• Sonderfälle: schwaches Netz, Querformat, reduzierte Bewegung in den Systemeinstellungen, Rückkehr in den Tab nach längerer Pause.

Emulation im Desktop-Browser ist ein guter Anfang, aber kein Ersatz. Ein Beispiel aus unseren eigenen Labormessungen: Auf einem emulierten Smartphone (Desktop-Chrome, CPU vierfach gedrosselt, Grafikkarte des Macs ungedrosselt) startet das 3D unserer Demos in etwa 0,5 bis 2 Sekunden. Echte Telefone haben wir dafür nicht getestet, und weil die Grafikkarte nicht gedrosselt ist, sagt der Wert über echte Geräte wenig aus. Deshalb gehört zu unserem Ablauf, dass Sie jede Version über einen privaten Link auf Ihren eigenen Geräten prüfen, bevor sie live geht.

Technisch helfen einige Entscheidungen, damit die Ansicht auch auf schwächeren Geräten möglichst flüssig bleibt: Wir zeichnen nur dann neue Bilder, wenn sich etwas bewegt (Rendern bei Bedarf, wie es auch das three.js-Handbuch beschreibt ^[4]), begrenzen die Auflösung während der Bewegung und zeichnen erst im Stillstand ein scharfes Bild. Pro Bühne läuft immer nur ein 3D-Modell; beim Wechsel wird das vorherige vollständig aus dem Speicher entfernt.

Schritt 8: Starten

Ein ruhiger Start besteht aus wenigen Punkten:

• Vorschaubild oder -video für jede Seite, auf der der Konfigurator erscheint
• Rückfallebene für Browser ohne 3D-Unterstützung
• eine klare Rückmeldung bei Fehlern statt einer leeren Fläche
• ein Kontakt für den Fall, dass ein Kunde eine Konfiguration nicht abschließen kann
• Hinweise, wo Werte vereinfacht sind (Beispielpreise, Abschätzungen)

Unser Regalsystem-Demo zeigt eine solche Grundausstattung im Kleinen: Raster, Fronten und Farben ändern oder direkt ein Fach anklicken, mit Explosionsansicht, Maßen und einer Stückliste, die mitrechnet.

Eigene Demo · fiktives Produkt

Regalsystem-Konfigurator

Ein modulares Regal: Raster, Fronten und Farben ändern oder direkt in 3D ein Fach anklicken. Die Stückliste rechnet mit.

In 3D ansehen →

Schritt 9: Messen und verbessern

Was Sie messen, haben Sie in Schritt 1 festgelegt. Technisch heißt das, Ereignisse zu erfassen – natürlich nur mit Einwilligung, wenn ein Analysewerkzeug Daten erhebt:

• 3D geöffnet
• Option gewählt (welche, in welcher Reihenfolge)
• Konfiguration abgeschlossen: Warenkorb, Anfrage oder Download
• Abbrüche: an welcher Stelle steigen Besucher aus?

Rechnen Sie mit Geduld. Bei ALUXIL ging die 3D-Ansicht am 16. September 2026 live; für belastbare Aussagen zu Anfragen oder Verkäufen war der Zeitraum noch zu kurz, deshalb veröffentlichen wir dazu bisher keine Zahlen. Wer nach zwei Wochen ein Urteil fällt, misst meist Zufall.

Selbst erstellen oder erstellen lassen?

Mit einer Software-Plattform können Sie viele dieser Schritte selbst gehen, wenn Ihr Produkt in die Vorlagen passt. Bei regelreichen Systemprodukten, besonderen Materialien oder Erklärfunktionen wie Explosionsansicht und Mechanik lohnt meist eine individuelle Entwicklung. Was die einzelnen Schritte kosten, steht im Artikel Was kostet ein 3D-Konfigurator?. Wenn Sie den Konfigurator erstellen lassen möchten, finden Sie unseren Ablauf auf der Seite 3D-Konfigurator.

Häufige Fragen

Wie lange dauert es, einen Produktkonfigurator zu erstellen?

Das hängt vor allem von Schritt 2 und 3 ab: Liegen Produktdaten und Regeln vollständig vor, geht das Modellieren deutlich schneller. Eine einfache Produktansicht ist ein kleines Projekt, ein Konfigurator mit vielen Regeln ein größeres. Einen verbindlichen Zeitrahmen gibt es erst nach der Prüfung Ihrer Unterlagen.

Brauche ich CAD-Daten, um einen 3D-Konfigurator zu erstellen?

Nein. Fotos, Maße und Zeichnungen reichen meist aus. CAD-Daten können helfen, wenn sie sich fürs Web eignen, müssen aber fast immer reduziert und aufbereitet werden.

Funktioniert ein 3D-Konfigurator auf dem Smartphone?

Ja, im Browser und ohne App, sofern das Gerät WebGL unterstützt. Voraussetzung ist, dass Modellgröße, Materialien und Rendering darauf ausgelegt sind, und dass auf echten Geräten getestet wird, nicht nur in der Emulation.

Kann ich den Konfigurator später selbst pflegen?

Bei vielen SaaS-Plattformen ja, über einen Editor. Bei individuell entwickelten Konfiguratoren kommt es auf die Vereinbarung an; einen Editor zur Selbstpflege bieten wir derzeit nicht als Standard an, Änderungen übernehmen wir als Pflege.

Quellen

1. Khronos Group: glTF – Runtime 3D Asset Delivery. https://www.khronos.org/gltf/
2. Khronos Group: EXT_meshopt_compression (glTF-Erweiterung). https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md
3. web.dev: Web Vitals. https://web.dev/articles/vitals
4. three.js Manual: Rendering on Demand. https://threejs.org/manual/#en/rendering-on-demand