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
obrót 360° · zoom · też na telefonie
3separat eingefärbte Teile
podstawa · słupek · blat
~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.

Konfigurator lamp 3D: od zdjęcia produktu do wariantu, który klient ogląda z każdej strony

Poradnik dla producentów lamp, mebli i dekoracji, którzy rozważają konfigurator lamp 3D na stronie lub w sklepie. Odpowiadamy na pytania o materiały, wierność kolorów, powiązanie wariantów z kodami produktów i o to, jak wykorzystać model 3D poza samym konfiguratorem.

Jak przygotować produkt do modelowania

Model 3D można zbudować z różnych źródeł. Najlepszy punkt wyjścia to pliki CAD z działu konstrukcyjnego, bo mają dokładne wymiary. Gdy ich nie ma, wystarczą zdjęcia i rysunek wymiarowy. Model w demie powyżej powstał z jednego zdjęcia referencyjnego, więc brak dokumentacji technicznej nie zamyka tematu.

Niezależnie od źródła warto przygotować:

  • wymiary gabarytowe i kluczowe proporcje (wysokość, średnica klosza, szerokość podstawy),
  • zdjęcia produktu z kilku stron w neutralnym świetle,
  • próbki lub zdjęcia makro materiałów: drewna, metalu, tkaniny klosza,
  • listę części, które klient ma zmieniać niezależnie od siebie.

Ostatni punkt decyduje o tym, jak model zostanie podzielony. W demie przekolorowują się osobno trzy części: podstawa, słupek i blat. Jeśli dziś sprzedajesz lampę w dwóch kolorach, a jutro chcesz osobno zmieniać klosz i oprawkę, lepiej powiedzieć o tym przed modelowaniem. Późniejszy podział gotowego modelu jest możliwy, ale zwykle oznacza ponowną pracę nad siatką i materiałami.

Materiały i wierność kolorów na ekranie

Kolor w przeglądarce zawsze zależy od ekranu klienta, jasności i ustawień telefonu. Nie da się tego w pełni kontrolować, ale da się ograniczyć rozjazd. Materiały warto budować na wzornikach producenta, a nie na kolorach dobranych „na oko” z palety.

Dla lamp szczególnie ważne są materiały, które reagują na światło: mosiądz, chrom, szkło mleczne, tkanina. Płaski kolor nie odda różnicy między metalem szczotkowanym a polerowanym. Tu przydają się materiały z odbiciami i fakturą. W interfejsie dobrze sprawdza się krótka uwaga, że kolor jest poglądowy, oraz opcja zamówienia próbki dla wykończeń premium.

Przy lampach dochodzi jeszcze jedno pytanie: czy pokazywać lampę zapaloną. Podgląd świecącego klosza dobrze sprzedaje nastrój, ale zmienia odbiór koloru materiału. Dobrym rozwiązaniem jest przełącznik „włączona / wyłączona”, który pozwala klientowi zobaczyć oba stany tego samego wariantu.

Konfigurator lamp 3D a sklep internetowy: warianty i kody produktów

Konfigurator w sklepie musi wiedzieć, jaki produkt trafia do koszyka. Najprostszy przypadek to sytuacja, w której każda kombinacja ma własny kod SKU. Przy kilku częściach i kilkunastu kolorach liczba kombinacji szybko rośnie, a zakładanie każdej w sklepie przestaje mieć sens.

Model danychKiedy pasujeCo trafia do koszyka
Gotowe warianty SKUMało kombinacji, produkcja na magazynKonkretny kod produktu
Produkt bazowy z opcjamiDużo kombinacji, produkcja na zamówienieProdukt bazowy i lista wybranych opcji z dopłatami
Zapytanie zamiast koszykaProdukty premium, zamówienia projektoweKonfiguracja wysłana do handlowca

Wybór modelu danych warto ustalić przed budową, bo wpływa na integrację ze sklepem i z systemem zamówień. Często kończy się na wariancie mieszanym: popularne kombinacje jako gotowe SKU, reszta jako zamówienie z opcjami.

W każdym z tych modeli konfigurator lamp 3D powinien przekazywać do koszyka lub zapytania czytelny opis wybranej kombinacji, a najlepiej także miniaturę wariantu. Dzięki temu obsługa zamówień i klient widzą to samo i nie ma sporów o to, który kolor był wybrany.

Wydajność i SEO strony z modelem 3D

Strona z konfiguratorem nadal musi szybko się ładować i być czytelna dla wyszukiwarek. Model w demie po optymalizacji waży około 1,5 MB przy 114 MB pliku źródłowego. To pokazuje skalę różnicy, jaką daje przygotowanie assetów pod przeglądarkę. Przy katalogu z kilkunastoma lampami ta różnica decyduje o tym, czy klient na telefonie w ogóle zobaczy model, czy zamknie stronę przed jego załadowaniem.

Kilka praktyk, które warto zaplanować od początku:

  • statyczne zdjęcie produktu widoczne od razu, a model doładowany w tle,
  • opis produktu, parametry i dane techniczne jako zwykły tekst na stronie, nie tylko w interfejsie konfiguratora,
  • osobny adres URL lub parametr dla zapisanej konfiguracji, żeby klient mógł ją komuś wysłać,
  • testy na słabszym telefonie i wolniejszym łączu, a nie tylko na komputerze w biurze.

Jeden model, wiele zastosowań

Model zbudowany do konfiguratora nie musi pracować tylko w nim. Z tego samego pliku można generować zdjęcia packshot w każdym kolorze, grafiki do katalogu, obrazy do kampanii reklamowych i podgląd w PDF z ofertą. Dla wielu firm to argument, który przesądza o opłacalności: koszt modelu rozkłada się na kilka działów.

Model można też przygotować do podglądu w rozszerzonej rzeczywistości, żeby klient sprawdził skalę lampy we własnym wnętrzu. To osobny etap, ale łatwiej go dodać, gdy model od początku powstaje z myślą o wielu formatach.

Kiedy zacząć i jak dobrać zakres pierwszego etapu

Konfigurator lamp 3D najlepiej zacząć od jednej kolekcji, która sprzedaje się dobrze i ma najwięcej wariantów kolorystycznych. Taki etap pozwala sprawdzić, czy klienci korzystają z podglądu, ile konfiguracji kończy się zapytaniem lub zakupem i które materiały wybierają najczęściej.

Na tej podstawie łatwiej zdecydować, czy dokładać kolejne modele, rozbudowywać reguły cenowe, czy inwestować w integrację ze sklepem. Kolejność rozwoju wynika wtedy z danych, a nie z założeń przyjętych przed startem. Pierwszy etap pozwala też sprawdzić współpracę: jak szybko powstają kolejne modele, ile poprawek wymagają materiały i jak sprawnie Twój zespół obsługuje panel.

// 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 – wir melden uns dann mit einem konkreten Plan und einem Kostenvoranschlag bei Ihnen. Unverbindlich, aber mit einem konkreten Preis.

contact@jsoncrew.com