Was ist ein 3D-Produktkonfigurator? Vorteile, Beispiele und wann Sie einen brauchen

Ein 3D-Produktkonfigurator ist ein interaktives Tool auf einer Webseite, mit dem Kunden Farben, Materialien und Varianten eines Produkts an einem 3D-Modell ändern und jede Änderung in Echtzeit sehen. Bei BASE BROS sind 3D-Konfiguratoren individuelle Projekte: Das Team konzipiert und entwickelt jeden Konfigurator eigens für die jeweilige Marke, mit einer AR-Vorschau, die sich ohne App im mobilen Browser öffnet. Dieser Leitfaden erklärt, wie ein Konfigurator funktioniert, was er bietet, welche Marken ihn einsetzen und wann der 3D Viewer, den Sie selbst im BASE 3D-AR Studio nutzen, völlig ausreicht.

Was ist ein 3D-Produktkonfigurator?

Ein 3D-Produktkonfigurator ist eine interaktive Anwendung im Browser, in der Kunden ihre eigene Version eines Produkts zusammenstellen. Sie wählen in einem Auswahlmenü Optionen wie Farbe, Material, Stoff, Oberfläche oder Größe, und das 3D-Modell daneben aktualisiert sich in Echtzeit. Das Ergebnis lässt sich drehen und zoomen, um es aus jedem Blickwinkel zu prüfen, und auf dem Smartphone per Augmented Reality im eigenen Raum platzieren.

3D-Viewer und 3D-Konfigurator sind eng miteinander verwandt. Ein 3D-Viewer zeigt ein Produkt als interaktives 3D-Modell, das Nutzer drehen, zoomen und in AR öffnen. Ein 3D-Konfigurator kann dasselbe und lässt sie zusätzlich Farben, Materialien und Varianten selbst ändern. Bei BASE BROS nutzen Sie den Viewer in Eigenregie im BASE 3D-AR Studio, während Konfiguratoren individuelle Projekte sind.

Wie funktioniert ein 3D-Produktkonfigurator?

Jeder Konfigurator folgt demselben Ablauf: Der Kunde wählt eine Option, das 3D-Modell zeigt sie sofort, und der Kunde kann das Ergebnis in AR ansehen, als Bild festhalten oder teilen.

1. Optionen wählen: Das Produkt ist in Bauteile gegliedert, und jedes Bauteil bietet eigene Farben oder Materialien. In der Demo mit dem Lounge-Sessel auf der Seite 3D Configurator von BASE legt ein Umschalter zwischen Leather und Fabric das Material der Polsterung fest. Sechs Bauteile (Back Upholstery, Front Upholstery, Back Wood, Front Wood, Metals und Legs) bieten jeweils fünf Optionen, und ein Reset-Button setzt die gesamte Auswahl zurück.
2. In Echtzeit sehen: Der Konfigurator von BASE rendert mit WebGPU, wechselt bei Bedarf automatisch zu WebGL und überträgt jede neue Farbe und jedes neue PBR-Material sofort auf das 3D-Modell.
3. Ansehen, festhalten und teilen: Per AR platzieren Kunden das Produkt auf iOS und Android direkt aus dem Browser in ihrem eigenen Raum. Ein Klick hält das konfigurierte Produkt als Bild fest, sodass sie genau diesen Look teilen können.

Auf derselben Seite gibt es außerdem eine Demo mit einer Taschenuhr von Nacar, die wir weiter unten ausführlich vorstellen.

Was kann ein 3D-Konfigurator von BASE umfassen?

BASE BROS entwickelt jeden Konfigurator rund um das Produkt, das er präsentiert. Der Funktionsumfang variiert daher von Projekt zu Projekt. Die Seite 3D Configurator nennt diese Bausteine:

• WebGPU-Rendering: hohe visuelle Qualität im Browser mit automatischem WebGL-Fallback.
• Material- und Textur-Editor: ein Materialsystem mit PBR-Texturen, individuellen Oberflächen und Vorschau in Echtzeit.
• Farbanpassung: Kunden wählen eine Farbe und sehen sie sofort am 3D-Modell.
• Dynamische Beleuchtung: einstellbare Lichtrichtung, Lichthöhe und Lichtintensität.
• Variantensystem: mehrere Produktvarianten mit unterschiedlichen Materialien, Größen und Konfigurationen.
• AR-Vorschau: Kunden platzieren das Produkt auf iOS und Android im eigenen Raum, direkt aus dem Browser und ohne App.
• Animationswiedergabe: integrierte Modellanimationen sowie eine automatische Drehung wie auf einem Drehteller.
• Hotspot-Anmerkungen: beschriftete Markierungen, die Materialien, Bauteile und wichtige Merkmale hervorheben.
• Sofort-Screenshot: Ein Klick hält das konfigurierte Produkt fest, bereit zum Teilen.

Welche Vorteile bietet ein 3D-Produktkonfigurator?

• Jede Kombination, ohne jede einzeln zu fotografieren. Ein einziges 3D-Modell zeigt alle Optionen. Das zahlt sich vor allem aus, wenn es ein Produkt in so vielen Kombinationen gibt, dass sich nicht jede einzeln fotografieren lässt.
• Kunden sehen, was sie auswählen. Jede Änderung erscheint sofort am Modell, und Kunden prüfen sie aus jedem Blickwinkel, statt sie sich anhand eines Farbmusters vorzustellen.
• Größe und Wirkung im realen Raum. Die AR-Vorschau nutzt Surface Tracking (Flächenerkennung), um das Produkt in Originalgröße auf einem realen Boden oder Tisch zu platzieren.
• Ein Ergebnis, das sich teilen lässt. Der Sofort-Screenshot hält das konfigurierte Produkt fest, sodass Kunden genau diesen Look an Kollegen, Partner oder Designer weitergeben können.
• Technische Details direkt am Modell. Hotspot-Anmerkungen weisen unmittelbar am 3D-Modell auf Materialien, Bauteile und wichtige Merkmale hin.
• Direkt auf Ihrer Website oder in Ihrem Onlineshop. Sie betten den fertigen Konfigurator per Einbettungscode in Ihre Website oder Ihren Onlineshop ein, ganz ohne Plug-ins.

Ein Praxisbeispiel: der Konfigurator für die Taschenuhr von Nacar

Auf der Seite 3D Configurator finden Sie einen Konfigurator, der auf einer Taschenuhr von Nacar basiert, einer Uhrenmarke mit Schweizer Wurzeln und Tradition seit 1929. Er zeigt auf einen Blick, was ein Konfigurator Ihren Kunden an die Hand gibt: rechts das Panel Customize, links die Uhr in Echtzeit-3D.

Was Kunden anpassen können

Die Uhr ist in sieben Bauteile gegliedert, und jedes davon hat einen eigenen Farbregler:

• Inner Case und Outer Case (Innen- und Außengehäuse)
• Inner Stripes
• Numerals (Ziffern)
• Inner Mechanism, das Uhrwerk, das durch das skelettierte Zifferblatt sichtbar ist
• Dial Pattern (Zifferblattmuster)
• Watch Hands (Zeiger)

Jedes Bauteil lässt sich mit einem Klick öffnen. Sobald der Kunde den Regler bewegt, erscheint die neue Farbe sofort an der Uhr, und der Punkt neben dem Namen des Bauteils zeigt die aktuelle Auswahl an. Mit Reset kehren alle Bauteile zu den Originalfarben des Modells zurück.

Wie Kunden das Ergebnis erkunden

Die AR-Vorschau zeigt die Uhr in ihrer Standardausführung. Jedes Projekt wird eigens für die jeweilige Marke entwickelt, daher richten sich Bauteile, Optionen und Steuerelemente nach dem Produkt. Weitere Projekte finden Sie im Showcase von BASE BROS und in den Anwendungsfällen von BASE.

Reicht ein 3D-Viewer, oder brauchen Sie einen 3D-Konfigurator?

Nicht jedes Produkt braucht einen Konfigurator. Entscheidend ist, wer die Auswahl trifft: Sie vor der Veröffentlichung oder Ihre Kunden auf der Seite.

Mit dem 3D Viewer im Studio legen Sie den Look selbst fest. Im Tab Material des Model Editors wählen Sie mit der Pipette ein Bauteil aus und bearbeiten Base Color, Roughness, Metalness, Normal, Emissive, Occlusion und Alpha. Diese Änderungen liegen als nichtdestruktive Ebene über dem Modell. Die ursprüngliche GLB-Datei bleibt also unverändert, und öffentlich sichtbar werden die Änderungen erst, wenn Sie auf Save klicken. Besucher sehen anschließend genau diesen gespeicherten Look auf der Live-3D-AR-Seite und können ihn in AR öffnen. Gibt es ein Produkt nur in wenigen Farbvarianten, können Sie jede Variante als eigenes Modell mit eigener Seite veröffentlichen.

Beim 3D Configurator legt der Kunde den Look fest. Das Team von BASE BROS entwickelt das Auswahlmenü, die Varianten und die zugrunde liegende Logik für Ihr Produkt.

Wenn Sie zuerst den Weg in Eigenregie ausprobieren möchten, lesen Sie So erstellen Sie eine 3D- und AR-Produktseite mit dem BASE 3D-AR Studio. Wie Sie das Modell aus Produktfotos erstellen, zeigt der Artikel Bild zu 3D. Wie Sie die Seite in Ihre Website einbinden, erfahren Sie im Artikel 3D und AR ohne App auf Ihrer Website. Der Free-Tarif kommt ohne Kreditkarte aus und umfasst bis zu 3 Live-Modelle und 3 neue Modelle pro Monat.

Wie starten Sie ein 3D-Konfigurator-Projekt mit BASE BROS?

1. Produkte und Optionen auflisten. Notieren Sie, welche Bauteile sich bei jedem Produkt ändern und welche Farben, Materialien, Größen oder Module Kunden wählen können.
2. 3D-Dateien zusammenstellen. Wenn Sie bereits 3D-Modelle haben, stellen Sie sie dem Team zur Verfügung. Um eine GLB-Datei vorab anzusehen, öffnen Sie sie in Quick View: Dort sehen Sie das Modell im Viewer des Studios, ohne die Datei hochzuladen. Wenn noch keine 3D-Dateien vorliegen, übernimmt BASE BROS auch die individuelle 3D-Modellierung und erstellt die Modelle für Ihr Projekt.
3. Den Vertrieb kontaktieren. Die Buttons Start Your Project und Schedule Demo auf der Seite 3D Configurator führen beide zur Kontaktseite. Senden Sie über das Formular eine kurze Projektbeschreibung und wählen Sie als Betreff Request Demo oder Enterprise Inquiry, oder schreiben Sie eine E-Mail an info@basebros.com.
4. Den fertigen Konfigurator einbetten. Fügen Sie den Einbettungscode des Konfigurators in Ihre Website oder Ihren Onlineshop ein. Plug-ins oder weitere Abhängigkeiten sind nicht erforderlich.

Einen Überblick über alle Lösungen von BASE BROS bietet der Artikel Lösungen von BASE BROS im Überblick. Wie Sie Modelle für Web und AR vorbereiten, lesen Sie im Leitfaden GLB vs. USDZ.

Ihren 3D-Konfigurator planen

Wenn Kunden ihre eigene Version Ihres Produkts zusammenstellen sollen, zeigt ein 3D-Konfigurator jede Auswahl in Echtzeit, mit einer AR-Vorschau direkt im mobilen Browser. Wenden Sie sich an den Vertrieb, um Ihren Konfigurator gemeinsam mit dem Team von BASE BROS zu planen. Oder starten Sie kostenlos im Studio und veröffentlichen Sie noch heute Ihre eigenen 3D- und AR-Produktseiten.