3D-Produktkonfigurator

Demo des 3D-Produktkonfigurators: ein GLB-Modell im Browser, 360°-Drehung und Live-Anpassung der Materialfarben.

Live-Demo · im Browser

3D-Produktkonfigurator: Modell im Browser und Echtzeit-Anpassung der Materialfarben

Sie können das Modell im Browser drehen und die Oberflächenausführung für jedes Teil – Sockel, Holzpfosten und Tischplatte – separat ändern. Ohne dass die Seite neu geladen wird, ohne dass Bilder ausgetauscht werden. Das Modell wurde anhand eines einzigen Referenzfotos erstellt. In der endgültigen Umsetzung binden wir Ihre Produkte und Materialpaletten ein.

3D-Produktkonfigurator

Drehen Sie das Modell und klicken Sie auf die Muster auf der rechten Seite. Die Farbe des Sockels und des Holzpfostens ändert sich sofort im 3D-Modell — Das ist dieselbe Vorgehensweise, die wir auch bei visuellen Produkten und Premium-Ausführungen anwenden.

3D-Modell wird geladen...
Klicken Sie hier, um das Modell zu drehen Ziehen · Scrollen = Zoomen
PBR-Rendering in Echtzeit · 3D-Modell erstellt von JSON Crew anhand eines Referenzfotos
Live-Konfiguration

Beenden

Wählen Sie für jedes Teil ein Material aus – das Modell ändert sich sofort.

Untergestell und TischplatteMattschwarz
Pfosten (Holz)Eiche
Was siehst du: Ein 3D-Modell (≈1,5 MB), dessen Farbgebung je nach Material im Browser angepasst wird – ohne Neuladen der Seite, ohne Austausch von Bildern. Dieselbe Funktionsweise wird auch für Ihren Produktkatalog genutzt.
13D-Modell im Browser
360°-Drehung · Zoom · auch auf dem Smartphone
3separat eingefärbte Teile
Fuß · Säule · Platte
~1,5 MBGewicht des 3D-Assets
von 114 MB Quellcode nach der Optimierung
0Neuladen der Seite beim Wechsel der Farbe
Material in Echtzeit umfärben
Wann ist ein 3D-Konfigurator wirklich hilfreich, und wann reicht 2D aus?

Wann ist ein 3D-Konfigurator wirklich hilfreich, und wann reicht 2D aus?

✓ Der 3D-Konfigurator ist sinnvoll, wenn:

01

Das Produkt ist visuell und emotional, und der Kunde möchte es sich vor seiner Entscheidung „ansehen”

02

Es gibt viele Material- und Farbkombinationen, deren Fotografieren sich nicht lohnt.

03

Du verkaufst hochwertige Ausstattungselemente, bei denen die Oberflächenstruktur und die Farbe als Verkaufsargumente dienen

04

Möchtest du Anfragen mit einer fertigen, von allen Seiten durchdachten Variante sammeln?

05

Die Unterschiede zwischen den Varianten sind optisch unerheblich (technische Parameter, nicht das Aussehen)

06

Der Katalog ist klein, und schon ein paar Fotos geben einen umfassenden Überblick über das Angebot.

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

Ein Leitfaden für Hersteller von Lampen, Möbeln und Dekoration, die einen 3D-Lampenkonfigurator auf ihrer Website oder im Shop in Betracht ziehen. Wir beantworten Fragen zu Materialien, Farbtreue, der Verknüpfung von Varianten mit Produktcodes und dazu, wie Sie das 3D-Modell über den Konfigurator hinaus nutzen.

Wie Sie ein Produkt für die Modellierung vorbereiten

Ein 3D-Modell lässt sich aus verschiedenen Quellen erstellen. Der beste Ausgangspunkt sind CAD-Dateien aus der Konstruktion, weil sie exakte Maße enthalten. Fehlen diese, reichen Fotos und eine Maßzeichnung. Das Modell in der Demo oben entstand aus einem einzigen Referenzfoto, fehlende technische Dokumentation ist 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 werden drei Teile separat umgefärbt: Fuß, Säule und Platte. Wenn Sie die Lampe heute in zwei Farben verkaufen und morgen Schirm und Fassung separat ändern möchten, sagen Sie das besser vor der Modellierung. Eine spätere Aufteilung des fertigen Modells ist möglich, bedeutet aber meist erneute Arbeit an Mesh und Materialien.

Materialien und Farbtreue auf dem Bildschirm

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

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

Bei Lampen kommt noch eine Frage hinzu: Soll die Lampe eingeschaltet gezeigt werden? Die Vorschau eines leuchtenden Schirms verkauft Stimmung, verändert aber die Wahrnehmung der Materialfarbe. Eine gute Lösung ist ein Schalter „ein / aus“, mit dem der Kunde beide Zustände derselben Variante sehen kann.

3D-Lampenkonfigurator und Onlineshop: Varianten und Produktcodes

Ein Konfigurator im Shop muss wissen, welches Produkt in den Warenkorb kommt. Der einfachste Fall ist, wenn jede Kombination einen eigenen SKU-Code hat. Bei mehreren Teilen und einem Dutzend Farben wächst die Zahl der Kombinationen schnell, und jede einzeln im Shop anzulegen ergibt keinen Sinn mehr.

Model danychKiedy pasujeWas in den Warenkorb kommt
Gotowe warianty SKUWenige Kombinationen, LagerfertigungKonkretny kod produktu
Basisprodukt mit OptionenViele Kombinationen, AuftragsfertigungBasisprodukt und Liste der gewählten Optionen mit Aufpreisen
Zapytanie zamiast koszykaPremium-Produkte, ProjektaufträgeKonfiguration an einen Vertriebsmitarbeiter gesendet

Das Datenmodell sollte vor dem Bau festgelegt werden, weil es die Integration mit dem Shop und dem Bestellsystem beeinflusst. 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-Lampenkonfigurator eine klare Beschreibung der gewählten Kombination an den Warenkorb oder die Anfrage übergeben, idealerweise auch ein Vorschaubild der Variante. So sehen Bestellabwicklung und Kunde dasselbe, und es gibt keinen Streit darüber, welche Farbe gewählt wurde.

Performance und SEO einer Seite mit 3D-Modell

Eine Seite mit Konfigurator muss weiterhin schnell laden und für Suchmaschinen lesbar sein. Das Modell in der Demo wiegt nach der Optimierung etwa 1,5 MB bei 114 MB Quelldatei. Das zeigt, welchen Unterschied die Aufbereitung der Assets für den Browser macht. Bei einem Katalog mit einem Dutzend Lampen entscheidet dieser Unterschied darüber, ob der Kunde auf dem 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 nachgeladen wird,
  • Produktbeschreibung, Parameter und technische Daten als normaler Text auf der Seite, nicht nur in der Konfigurator-Oberfläche,
  • eine eigene URL oder ein Parameter für die gespeicherte Konfiguration, damit der Kunde sie weiterschicken kann,
  • Tests auf einem schwächeren Smartphone und bei langsamer Verbindung, nicht nur am Bürorechner.

Ein Modell, viele Einsatzmöglichkeiten

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

Das Modell kann auch für eine Augmented-Reality-Vorschau vorbereitet werden, damit der Kunde die Größe der Lampe 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 erstellt wird.

Wann Sie starten und wie Sie den Umfang der ersten Phase wählen

Einen 3D-Lampenkonfigurator beginnen 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 Basis lässt sich leichter entscheiden, ob weitere Modelle hinzukommen, Preisregeln ausgebaut werden oder in die Shop-Integration investiert wird. Die Reihenfolge der Weiterentwicklung ergibt sich dann aus Daten statt aus Annahmen vor dem Start. Die erste Phase zeigt auch, wie die Zusammenarbeit läuft: wie schnell weitere Modelle entstehen, wie viele Korrekturen die Materialien brauchen und wie gut Ihr Team mit dem Panel arbeitet.

// FAQ

Häufig gestellte Fragen

Woher kommt das 3D-Modell, wenn wir keine eigenen Dateien haben?
Wir modellieren sie. Das Modell auf dieser Seite entstand anhand eines einzigen Referenzfotos; Anschließend haben wir das Netz in einzelne Teile unterteilt und die Materialien für die Neufärbung vorbereitet. Wenn Sie bereits eigene 3D-Dateien haben, integrieren wir diese direkt. Wir berechnen den Preis pro Produkt und die Anzahl der Modelle legen wir vertraglich fest.
Läuft das auf dem Handy reibungslos?
I. Dieses Modell ist etwa 1,5 MB groß, lädt schnell und wird im Browser aufgerufen, ohne dass etwas installiert werden muss. Die Optimierung von Assets für mobile Geräte ist bei uns Standard und kein Zusatzfeature.
Können wir später weitere Produkte und Materialien hinzufügen?
I. Normalerweise beginnen wir mit einer Hauptkategorie und einigen Modellen und erweitern den Katalog schrittweise. Materialien, Farben und Preisregeln kannst du über das Admin-Panel ändern, ohne dass für jede Änderung eine Rechnung an uns gestellt werden muss.
Worin unterscheidet sich ihr euch von einem vorgefertigten Plugin für 3D-Konfiguration?
Fertige Plugins bieten eine generische Benutzeroberfläche und in der Regel ein eigenes Abonnement. Wir entwickeln ein maßgeschneidertes Design, eine Informationsarchitektur, die auf Ihre Vertriebswege zugeschnitten ist, sowie Preisregeln und Integrationen. Dieses Tool ist speziell auf Ihren Katalog zugeschnitten – es ist keine Vorlage, in die Sie einfach nur Ihre Produkte einfügen.
Kann ich mir andere funktionierende Konfiguratoren ansehen?
I – das ist unser Showroom: Im Bereich /showroom/ findest du unter anderem einen 3D-Waffenkonfigurator, einen 3D-Autokonfigurator (Karosserie, Lackierung, Felgen), einen Hauskonfigurator und einen 2D-Türkonfigurator. Alle zeigen die Produktionsabläufe, denselben Code und dieselben Vorlagen, die auch bei unseren Kunden zum Einsatz kommen. Die Daten in dieser Demo dienen nur als Beispiele.
// Sonstige Werkzeuge

Weitere Konfiguratoren und Schätzprogramme anzeigen

// Kontakt

Vereinbaren Sie ein kostenloses Gespräch

Erzählen Sie uns von Ihrem Projekt und wir werden Sie mit einem konkreten Plan und Angebot kontaktieren. Keine Verpflichtungen, spezifischer Wert.

contact@jsoncrew.com