Konfigurator zamienia produkt z wieloma opcjami w coś, co można obejrzeć, obrócić i zmienić, a na końcu daje konfigurację, z którą da się coś zrobić: zapytanie o wycenę, zamówienie albo zapisany link.
To w równym stopniu projekt, produkcja 3D i oprogramowanie. Scena musi wyglądać dobrze, sterowanie musi być zrozumiałe bez instrukcji, a opcje, reguły i ceny w tle muszą się zgadzać.
Co dostarczamy
- Podgląd 3D w czasie rzeczywistym z obracaniem i przybliżaniem
- Wybór materiału, koloru i wykończenia
- Logika opcji z dozwolonymi kombinacjami
- Wyliczanie ceny albo zapytanie o wycenę, gdzie to możliwe
- Przygotowanie modeli i optymalizacja pod web
- Dostrojenie do telefonów i statyczne obrazy zastępcze
- Zapisywanie i udostępnianie konfiguracji
- Połączenie z CRM-em, procesem wyceny albo koszykiem
Technologia i wdrożenie
Konfiguratory budujemy w Three.js, przez React Three Fiber wewnątrz strony w Next.js, z renderowaniem w czasie rzeczywistym na WebGL. Modele przygotowujemy w Blenderze, eksportujemy do glTF albo GLB, kompresujemy (na przykład Meshoptem) i dajemy im tekstury w rozmiarach rozsądnych dla przeglądarki. Ciężkie pliki ładują się dopiero wtedy, gdy są potrzebne, na przykład po wyborze modelu.
Na telefonie scena się dostosowuje: rozdzielczość spada, gdy spada liczba klatek, efekty się upraszczają, a tam, gdzie brakuje WebGL albo włączono ograniczenie ruchu, pojawia się statyczny obraz. Celem jest konfigurator, który szybko otwiera się na telefonie ze średniej półki, a nie tylko na monitorze w studiu.
Za sceną stoją dane produktu: jakie opcje istnieją, które kombinacje są dozwolone, ile kosztuje każda z nich. Przy małym asortymencie mogą być częścią strony, przy większym pochodzą z CMS-a, systemu PIM albo sklepu. Gotowa konfiguracja może trafić do formularza wyceny, przez webhook do CRM-u albo do koszyka.
Jak przebiega praca
Opcje i reguły
Najpierw spisujemy logikę produktu: opcje, zależności, ceny.
Przegląd materiałów
Sprawdzamy dostarczone modele albo dane CAD i planujemy, co trzeba odbudować.
Wygląd produktu
Materiały i oświetlenie dopasowujemy do zdjęć referencyjnych rzeczywistego produktu.
Budowa i testy
Sterowanie, logika i integracje, testowane na telefonach, których naprawdę używają Twoi klienci.
Przykładowe zastosowanie
Scenariusz poglądowy, nie opis zrealizowanego projektu.
Firma zajmująca się detailingiem samochodowym pozwala klientom oglądać wykończenia folii ochronnych lakieru i wysłać zapytanie o wycenę na podstawie wybranego auta i konfiguracji.