3D im Browser: Wann lohnt sich ein Produktkonfigurator?

Wann sich 3D lohnt

Bei Produkten mit vielen Varianten, Materialien oder Maßen zeigt ein 3D-Modell genau die Ausführung, die gewählt wurde. Das erleichtert die Entscheidung und beantwortet viele Fragen, bevor sie gestellt werden.

Typische Beispiele sind Möbel und Einrichtung, Maschinen und Bauteile, Fahrzeugzubehör oder Sportgeräte. Wo Kundinnen und Kunden aus vielen Kombinationen wählen, müsste ein Shop sonst Hunderte Produktfotos erstellen und pflegen. Ein Modell ersetzt sie: Farbe, Material und Anbauteile werden im Browser zusammengesetzt, in jeder möglichen Kombination.

Auch erklärungsbedürftige Technik profitiert. Ein Modell, das sich drehen, öffnen oder zerlegen lässt, zeigt Aufbau und Funktion eines Produkts anschaulicher als eine Explosionszeichnung im Datenblatt.

Wann Fotos genügen

Nicht jedes Produkt braucht 3D. Gibt es nur wenige Varianten und kommt es vor allem auf Atmosphäre an, etwa bei Mode oder Lebensmitteln, sind gute Fotos und kurze Videos meist die bessere Wahl. Sie sind schneller produziert und geben Stoffe, Oberflächen und Licht oft natürlicher wieder als ein Modell, das der Browser in Echtzeit zeichnet.

Als Faustregel gilt: Je mehr Kombinationen ein Produkt hat und je wichtiger Maße und Passform sind, desto eher lohnt sich ein Konfigurator.

Woher die Modelle kommen

Viele Hersteller haben bereits CAD-Daten aus der Konstruktion. Für den Browser sind sie meist zu detailliert: Schrauben, Innenleben und Fertigungsdetails, die niemand sieht, kosten Ladezeit und Rechenleistung. Die Daten werden deshalb vereinfacht, mit Materialien versehen und im Format glTF ausgeliefert, dem Standard für 3D im Web.

Liegen keine CAD-Daten vor, entsteht das Modell nach Fotos, Maßzeichnungen oder einem Muster in einem 3D-Programm wie Blender. In beiden Fällen sollte das Modell von Anfang an in sinnvolle Teile gegliedert sein: Was seine Farbe ändern, ausgetauscht werden oder sich bewegen soll, braucht ein eigenes Bauteil.

Was ein Konfigurator können muss

Das Modell ist nur ein Teil der Aufgabe. Ein Konfigurator braucht Regeln: Welche Optionen passen zusammen, welche schließen sich aus, und wie verändert sich der Preis? Diese Logik gehört nicht ins 3D-Modell, sondern in den Shop oder die Warenwirtschaft, damit Preise und Verfügbarkeiten an einer Stelle gepflegt werden.

Am Ende muss die gewählte Konfiguration vollständig im Warenkorb ankommen, mit Artikelnummern, die Lager und Fertigung verstehen. Diese Anbindung ist oft aufwendiger als die Darstellung selbst und gehört deshalb früh in die Planung.

Ladezeit auf allen Geräten

Der Konfigurator passt seine Darstellungsqualität an das Gerät an, lädt Modelle erst bei Bedarf und zeigt ein Standbild, wo 3D nicht möglich ist. So funktioniert er auch auf älteren Smartphones.

Dafür werden Geometrie und Texturen mit Verfahren wie Draco und KTX2 komprimiert. Ein Modell schrumpft dabei auf einen Bruchteil seiner ursprünglichen Größe, ohne dass der Unterschied auf dem Bildschirm sichtbar wird. Zusätzlich zeichnet der Browser nur, solange sich etwas bewegt. Steht das Modell still, ruht auch der Grafikprozessor, und der Akku wird geschont.

Getestet wird auf echten Geräten, auch auf einem einfachen Smartphone, das einige Jahre alt ist. Ein Konfigurator, der nur auf dem Entwicklungsrechner flüssig läuft, verfehlt einen großen Teil der Besucherinnen und Besucher.

Barrierefreiheit und Suchmaschinen

Für Screenreader und Suchmaschinen ist ein 3D-Modell zunächst nur eine Fläche. Alle wichtigen Informationen gehören deshalb zusätzlich als Text auf die Seite: die gewählten Optionen, die Maße und der Preis. Die Bedienelemente des Konfigurators sind gewöhnliche Schaltflächen, die sich auch mit der Tastatur erreichen lassen. Wer in seinem System „Bewegung reduzieren“ eingestellt hat, sieht das Modell ohne automatische Drehung.

Ein Beispiel aus der Praxis

Für JuCad, einen Hersteller von Golftrolleys, habe ich die Trolleys als 3D-Modelle umgesetzt. Auf meiner Seite zu 3D und WebGL können Sie einen davon von allen Seiten betrachten, ein Golfbag aufsetzen und ihn bis auf sein Packmaß zerlegen, direkt im Browser.

So beginnt ein Projekt

Am Anfang stehen drei Fragen: Welche Varianten soll der Konfigurator abbilden, welche Daten liegen bereits vor, und wo landet die fertige Konfiguration? Mit den Antworten lässt sich der Aufwand verlässlich einschätzen. Oft ist es sinnvoll, mit einer Produktlinie zu beginnen und den Konfigurator danach schrittweise auszubauen.