3D-Leuchtenkonfigurator mit Live-Farbwechsel | JSON Crew

3D-Produktkonfigurator

Demo eines 3D-Produktkonfigurators: eine Tischleuchte im Browser, 360°-Drehung und Live-Änderung von Form, Materialien und Licht.

Live-Demo · im Browser

3D-Produktkonfigurator: Modell im Browser und Materialwechsel live

Sie drehen die Leuchte im Browser und ändern sie Teil für Teil: Form und Material des Schirms, Form und Oberfläche des Fußes, Höhe, Metallteile, Kabel und Lichtfarbe. Ohne Neuladen der Seite, ohne Austausch von Fotos. In der finalen Umsetzung binden wir Ihre Produkte, Materialpaletten und Variantenregeln an.

3D-Leuchtenkonfigurator: vom Produktfoto zur Variante, die der Kunde von allen Seiten betrachtet

Ein Leitfaden für Hersteller von Leuchten, Möbeln und Wohnaccessoires, die einen 3D-Leuchtenkonfigurator auf ihrer Website oder im Onlineshop planen. Wir beantworten Fragen zu Materialien, Farbtreue, der Verknüpfung von Varianten mit Artikelnummern und dazu, wie sich das 3D-Modell über den Konfigurator hinaus nutzen lässt.

Wie Sie ein Produkt für die Modellierung vorbereiten

Ein 3D-Modell lässt sich aus verschiedenen Quellen aufbauen. Der beste Ausgangspunkt sind CAD-Dateien aus Ihrer Konstruktionsabteilung, weil sie exakte Maße enthalten. Fehlen sie, genügen Fotos und eine Maßzeichnung. Die Leuchte in der Demo oben ist parametrisch aus Katalogmaßen aufgebaut – fehlende CAD-Unterlagen sind also kein Hindernis.

Unabhängig von der Quelle sollten Sie Folgendes vorbereiten:

  • Außenmaße und wichtige Proportionen (Höhe, Schirmdurchmesser, Fußbreite),
  • Produktfotos von mehreren Seiten bei neutralem Licht,
  • Muster oder Makrofotos der Materialien: Holz, Metall, Schirmstoff,
  • eine Liste der Teile, die der Kunde unabhängig voneinander ändern soll.

Der letzte Punkt entscheidet darüber, wie das Modell aufgeteilt wird. In der Demo ändern sich Schirm, Fuß, Metallteile und Kabel getrennt. Wenn Sie eine Leuchte heute in zwei Farben verkaufen, morgen aber Schirm und Fassung getrennt ändern möchten, sagen Sie das besser vor der Modellierung. Ein fertiges Modell nachträglich aufzuteilen ist möglich, bedeutet aber meist erneute Arbeit am Polygonnetz und an den Materialien.

Materialien und Farbtreue am Bildschirm

Die Farbe im Browser hängt immer vom Bildschirm des Kunden, von der Helligkeit und den Einstellungen des Smartphones ab. Das lässt sich nicht vollständig kontrollieren, die Abweichung aber begrenzen. Materialien sollten Sie auf Basis der Farbmuster des Herstellers aufbauen und nicht auf Farben, die „nach Augenmaß“ aus einer Palette gewählt wurden.

Bei Leuchten sind Materialien, die auf Licht reagieren, besonders wichtig: Messing, Chrom, Opalglas, Stoff. Eine flache Farbe kann den Unterschied zwischen gebürstetem und poliertem Metall nicht wiedergeben. Hier helfen Materialien mit Reflexionen und Struktur. In der Benutzeroberfläche bewährt sich ein kurzer Hinweis, dass die Farbe nur zur Orientierung dient, sowie die Option, für Premium-Ausführungen ein Muster zu bestellen.

Bei Leuchten kommt noch eine Frage hinzu: Soll die Leuchte eingeschaltet gezeigt werden? Ein leuchtender Schirm transportiert die Stimmung gut, verändert aber die Wahrnehmung der Materialfarbe. Eine gute Lösung ist ein Schalter „an / aus“, mit dem der Kunde beide Zustände derselben Variante sehen kann.

3D-Leuchtenkonfigurator und Onlineshop: Varianten und Artikelnummern

Ein Konfigurator im Onlineshop muss wissen, welches Produkt in den Warenkorb kommt. Am einfachsten ist es, wenn jede Kombination eine eigene SKU hat. Bei mehreren Teilen und gut einem Dutzend Farben wächst die Zahl der Kombinationen schnell, und jede einzeln im Shop anzulegen ist nicht mehr sinnvoll.

DatenmodellWann es passtWas in den Warenkorb kommt
Fertige SKU-VariantenWenige Kombinationen, LagerfertigungEine bestimmte Artikelnummer
Basisprodukt mit OptionenViele Kombinationen, AuftragsfertigungBasisprodukt und Liste der gewählten Optionen mit Aufpreisen
Anfrage statt WarenkorbPremiumprodukte, ProjektaufträgeKonfiguration an den Vertrieb

Das Datenmodell sollten Sie vor dem Bau festlegen, denn es beeinflusst die Anbindung an den Shop und an das Bestellsystem. Oft läuft es auf eine Mischform hinaus: beliebte Kombinationen als fertige SKUs, der Rest als Bestellung mit Optionen.

In jedem dieser Modelle sollte der 3D-Leuchtenkonfigurator eine klare Beschreibung der gewählten Kombination an den Warenkorb oder die Anfrage übergeben, am besten auch ein Vorschaubild der Variante. So sehen Auftragsabwicklung und Kunde dasselbe, und es gibt keinen Streit darüber, welche Farbe gewählt wurde.

Ladezeit und SEO einer Seite mit 3D-Modell

Eine Seite mit Konfigurator muss trotzdem schnell laden und für Suchmaschinen lesbar sein. Ein Modell aus einer Quelldatei wiegt nach der Optimierung meist 1–3 MB statt über 100 MB, und die Leuchte in der Demo oben, aus Parametern aufgebaut, noch weniger. Das zeigt, welchen Unterschied es macht, 3D-Daten für den Browser aufzubereiten. Bei einem Katalog mit gut einem Dutzend Leuchten entscheidet dieser Unterschied darüber, ob ein Kunde am Smartphone das Modell überhaupt sieht oder die Seite schließt, bevor es geladen ist.

Einige Praktiken, die Sie von Anfang an einplanen sollten:

  • ein statisches Produktfoto, das sofort sichtbar ist, während das Modell im Hintergrund nachlädt,
  • Produktbeschreibung, Kennwerte und technische Daten als normaler Text auf der Seite, nicht nur in der Oberfläche des Konfigurators,
  • eine eigene URL oder ein Parameter für eine gespeicherte Konfiguration, damit der Kunde sie weiterschicken kann,
  • Tests auf einem schwächeren Smartphone und mit langsamerer Verbindung, nicht nur am Bürorechner.

Ein Modell, viele Einsatzmöglichkeiten

Ein für den Konfigurator gebautes Modell muss nicht nur dort zum Einsatz kommen. Aus derselben Datei lassen sich Packshots in jeder Farbe, Katalogbilder, Motive für Werbekampagnen und eine Vorschau im PDF-Angebot erzeugen. Für viele Unternehmen ist das das entscheidende Argument für die Wirtschaftlichkeit: Die Kosten des Modells verteilen sich auf mehrere Abteilungen.

Das Modell lässt sich auch für eine Augmented-Reality-Ansicht vorbereiten, damit der Kunde die Größe der Leuchte im eigenen Raum prüfen kann. Das ist eine eigene Phase, lässt sich aber leichter ergänzen, wenn das Modell von Anfang an für mehrere Formate gebaut wird.

Wann Sie starten und wie Sie den Umfang der ersten Phase festlegen

Einen 3D-Leuchtenkonfigurator starten Sie am besten mit einer Kollektion, die sich gut verkauft und die meisten Farbvarianten hat. In dieser Phase sehen Sie, ob Kunden die Vorschau nutzen, wie viele Konfigurationen in einer Anfrage oder einem Kauf enden und welche Materialien am häufigsten gewählt werden.

Auf dieser Grundlage fällt die Entscheidung leichter, ob Sie weitere Modelle ergänzen, die Preisregeln ausbauen oder in die Shop-Anbindung investieren. Die Reihenfolge der Weiterentwicklung ergibt sich dann aus Daten statt aus Annahmen vor dem Start. Die erste Phase zeigt außerdem, wie die Zusammenarbeit läuft: wie schnell neue Modelle entstehen, wie viele Korrekturen die Materialien brauchen und wie sicher Ihr Team mit dem Panel umgeht.

Wenn Sie Lichtsysteme statt einzelner Leuchten anbieten, sehen Sie sich den 3D-Beleuchtungskonfigurator an. Den ersten Umfang und das Budget Ihres Projekts schätzen Sie mit dem Kostenrechner für Konfiguratoren, und über Ihren Katalog können Sie mit uns über das Kontaktformular sprechen.

Häufig gestellte Fragen

Woher kommt das 3D-Modell, wenn wir keine eigenen Dateien haben?
Wir erstellen die Modelle selbst. Die Leuchte auf dieser Seite haben wir parametrisch aus Katalogmaßen aufgebaut, mit eigenen Teilen und Materialien für jede Option; Produkte mit unregelmäßigen Formen modellieren wir nach Referenzfotos. Wenn Sie bereits eigene 3D-Dateien haben, binden wir sie direkt ein. Wir kalkulieren pro Produkt, die Anzahl der Modelle legen wir im Vertrag fest.
Läuft das flüssig auf dem Smartphone?
Ja. Die Leuchte auf dieser Seite entsteht aus Parametern, lädt also kein schweres Modell herunter, ist schnell geladen und wird im Browser gerendert, ohne dass etwas installiert werden muss. Die Optimierung der 3D-Daten für Mobilgeräte ist bei uns Standard, kein Extra.
Können wir später weitere Produkte und Materialien hinzufügen?
Ja. Meist starten wir mit einer Flaggschiff-Kategorie und einigen Modellen und bauen den Katalog schrittweise aus. Materialien, Farben und Preisregeln ändern Sie selbst im Admin-Panel – ohne für jede Korrektur eine Rechnung von uns.
Was unterscheidet Sie von einem fertigen Plug-in für die 3D-Konfiguration?
Fertige Plug-ins bieten eine generische Oberfläche und meist ein eigenes Abonnement. Wir entwickeln ein individuelles Design, eine Informationsarchitektur für Ihre Art zu verkaufen, Preisregeln und Integrationen. Es ist ein Werkzeug für Ihren Katalog, keine Vorlage, in die Sie Ihre Produkte hineinzwängen.
Kann ich andere funktionierende Konfiguratoren sehen?
Ja – genau dafür ist unser Showroom da: Im Bereich /de/showroom/ finden Sie unter anderem den 3D-Carport-Konfigurator, den 3D-Autokonfigurator (GLB, Lack, Felgen), den Modulhaus-Konfigurator und den 2D-Türkonfigurator. Alle zeigen produktionsreife Mechanik, denselben Code und dieselben Muster, die bei unseren Kunden laufen. Die Daten in dieser Demo sind Beispieldaten.