Konfigurator 3D — plan techniczny
- Lektura
- 6min
- Objętość
- 1212słów
- Sekcji
- 26
- Slug
- konfigurator-3d
Status
- iFAZA 3-4 (6-12 miesięcy po starcie sprzedazy) — NIE priorytet na start. Wymaga: portfolio z profesjonalnymi zdjeciami, ruch na stronie >500 unikalnych/mies., ustabilizowane ceny i opcje.
- iZaden polski producent betonu dekoracyjnego nie ma konfiguratora 3D - to unikalna przewaga techniczna producenta-programisty
- iPowtarzalne zapytania o warianty (kolor, rozmiar, dodatki) zajmuja czas obslugi
Funkcjonalność konfiguratora
- Klient wybiera typ produktu (umywalka, doniczka, blat, numer domu, zegar)
- Obraca model 3D w przegladarce
- Zmienia parametry: kolor, kruszywo, wymiary, dodatki (LED, glow, acid stain)
- Widzi wizualizacje na zywo - zmiana parametru = model sie aktualizuje
- Dostaje cene w czasie rzeczywistym
- Sklada zamówienie z dokladna specyfikacja
Argumenty za i przeciw
| Za | Przeciw |
|---|---|
| Zaden polski producent betonu tego nie ma | Zero sensu bez portfolio i ruchu na stronie |
| Redukuje pytania - klient sam widzi opcje | Dev time: 80-150h. Za te godziny zrobisz 30-50 produktow fizycznych. |
| Value perception - konfigurator = "poważna firma" | Klient premium chce rozmawiac z czlowiekiem, nie klikac widgety |
| Viralowy potencjal (LinkedIn/Twitter/HN) | Bez SEO/ruchu nikt go nie zobaczy |
| Automatyzacja wycen | Na 5 zamówień/mies. ręczna wycena = 30 min |
Stack techniczny
| Warstwa | Technologia | Dlaczego |
|---|---|---|
| Frontend | Vue 3 + Nuxt 3 (SSG/SSR) | Twoj stack. SEO. |
| Renderer 3D | Three.js (via TresJS - Vue wrapper) | Najpopularniejszy. TresJS = natywna integracja z Vue 3. |
| Modele 3D | .glTF / .glb | Standard webowy, maly rozmiar, PBR materials |
| Materiały/tekstury | PBR (Physically Based Rendering) | Realistyczny beton, terrazzo, drewno |
| UI konfiguracji | Tailwind + headless UI | Szybko, responsywnie |
| Kalkulacja cen | Logika w Pinia store | Reaktywna |
| Backend (zamówienia) | Laravel (Twoj stack) | API do zapisu konfiguracji + wyceny |
| Hosting | Vercel (frontend) + VPS (Laravel API) | Darmowy tier Vercel na start |
Produkty i parametry konfigurowalne
| Produkt | Parametry | Wpływ na cene |
|---|---|---|
| Umywalka nablatowa | Kształt (okragla/prostokatna/owalna), O/wymiary, kolor betonu, kruszywo terrazzo, wykończenie, żywica epoksy, LED WLED smart | Tak |
| Doniczka | Kształt (cylindryczna/stozkowa/z brzuchem), O, wysokosc, kolor, technika (acid stain/gładka/terrazzo), LED opcja | Tak |
| Blat | Wymiary (dl x szer x gr), kolor, kruszywo, otwor na umywalke, krawędź (prosta/fazowana/zaokrąglona) | Tak |
| Numer domu | Cyfry (input), font (3-5 opcji), kolor tla, kolor cyfr, glow-in-the-dark, wymiar | Tak |
| Zegar scienny | O, kolor, material wskazowek, dodatki (mech/epoksy/LED) | Tak |
Model danych — ProductConfig
interface ProductConfig { productType: 'sink' | 'planter' | 'countertop' | 'house_number' | 'clock', dimensions: { diameter?: number, width?: number, length?: number, height?: number, thickness?: number } // mm, material: { concreteType: 'gfrc' | 'scc' | 'uhpc' | 'terrazzo', color: string // hex lub nazwa: 'anthracite' | 'white' | 'natural' | 'sage', aggregate: string // 'marble_white' | 'glass_blue' | 'copper' | 'shell', finish: 'matte' | 'satin' | 'polished' }, addons: { epoxyInterior?: boolean, ledWled?: boolean, glowInDark?: boolean, acidStain?: boolean, woodAccent?: boolean }, pricing: { baseCost: number, laborCost: number, addonsTotal: number, margin: number, finalPrice: number } }
Stale kosztówe materiałów
| Material | Koszt (zl/kg) | Gęstość (kg/m3) |
|---|---|---|
| GFRC | 5,50 | 1 920 |
| SCC | 4,00 | 2 350 |
| UHPC | 12,00 | 2 475 |
| Terrazzo | 2,15 | 2 300 |
Bazowy czas pracy per produkt
- Umywalka (sink)
- 4,0h
- Doniczka (planter)
- 1,5h
- Blat (countertop)
- 6,0h
- Numer domu (house_number)
- 1,0h
- Zegar (clock)
- 1,5h
Koszty dodatkow
| Dodatek | Koszt (zl/szt.) |
|---|---|
| Żywica epoksy (Epidian 5 + Z-1 + aplikacja) | 45 |
| WLED (ESP32 + WS2812B + zasilacz + montaz) | 85 |
| Pigment fosforescencyjny (glow) | 35 |
| Acid stain (FeCl3 + aplikacja) | 25 |
Koszty kruszywa dekoracyjnego
| Kruszywo | Koszt (zl/kg) |
|---|---|
| Marmur biały | 2,50 |
| Marmur zielony | 3,50 |
| Szklo niebieskie | 5,00 |
| Szklo lustrzane | 6,00 |
| Miedz | 15,00 |
| Mosiadz | 18,00 |
| Muszle | 4,00 |
Logika cenowa
Formula: (material + praca + dodatki) x 2,8 x mnoznik wykończenia. Mnoznik: mat=1,0, satyna=1,15, połysk=1,35. Stawka pracy: 80 zl/h.
Koszt materialu = objętość x gęstość x cena za kg. Terrazzo: dopłata za kruszywo dekoracyjne (60% objętości zamienione na kruszywo).
Wynik zaokrąglony do pełnych zlotych.
TresJS — deklaratywny 3D w Vue
TresJS (tresjs.org) to Vue 3 wrapper na Three.js. Zamiast imperatywnego Three.js piszesz deklaratywne komponenty Vue: TresCanvas, TresPerspectiveCamera, OrbitControls, TresMesh, TresAmbientLight, TresDirectionalLight.
Reaktywność Vue = zmiana parametru w storze automatycznie aktualizuje material/geometrie. Bez ręcznego renderer.render().
Modele parametryczne (kodem)
Dla prostych kształtow (cylindryczne doniczki, prostokatne blaty) modele parametryczne w Three.js: LatheGeometry z profilePoints generowanymi z parametrów konfiguracji. Zmiana O i wysokosci w real-time.
Rekomendacja: modele parametryczne (kodem) dla prostych kształtow + Blender dla organicznych (umywalki, donice z brzuchem).
Darmowe tekstury PBR
- ambientCG.com — darmowe tekstury PBR, licencja CC0
- polyhaven.com — darmowe tekstury PBR, modele 3D, HDRIs
WAZNE: tekstury z własnych produktow
- ⚠Zrob zdjecia SWOICH produktow i generuj z nich tekstury — Generyczne tekstury betonu wyglądaja inaczej niż Twoj beton. Klient dostanie produkt inny niż w konfiguratorze -> reklamacja.
Źródła modeli 3D
| Źródło | Format | Konwersja | Koszt |
|---|---|---|---|
| Twoje mastery (Fusion 360, FreeCAD, Blender) | .STL / .STEP | Blender -> export .glb | 0 zl |
| Parametryczne (Three.js geometry) | Kod JS | Cylinder, lathe, extrude | 0 zl |
| Gotowe (Sketchfab, TurboSquid) | .glTF | Gotowe | 0-200 zl |
Tekstury PBR betonu
| Mapa | Co robi | Skad |
|---|---|---|
| Albedo (color) | Kolor bazowy betonu | Zdjecia Twoich produktow -> Materialize/Substance |
| Normal | Mikrostruktura (pory, tekstura) | Generowane z albedo |
| Roughness | Mat vs połysk | Ręcznie (mat=1, połysk=0.1) |
| AO (Ambient Occlusion) | Cienie w zaglebieniach | Bake w Blenderze |
MVP vs Full Version
| Cecha | MVP (faza 3, ~40h) | Full (faza 4+, ~120h) |
|---|---|---|
| Produkty | 2 (umywalka + doniczka) | 5+ |
| Modele 3D | Parametryczne (kod) | Blender + parametryczne |
| Kolory | 5 presetow | Color picker + custom |
| Terrazzo | Brak | Losowe generowanie kruszywa na modelu |
| Wymiary | 3 rozmiary (S/M/L) | Suwak mm-by-mm |
| LED/glow | Checkbox (tak/nie) | Podglad efektu swiecenia |
| Cena | Statyczny cennik | Kalkulacja real-time |
| Zamówienie | Formularz kontaktowy z konfiguracja | Koszyk + platnosc online |
| AR | Brak | Podglad w pokoju (WebXR) |
| Mobile | Responsywny | Touch gestures, pinch-to-zoom |
Alternatywa na start: interaktywna galeria z wariantami (faza 1-2)
Zamiast pełnego konfiguratora 3D - 80% wartośći za 20% pracy: zdjecia 5 wariantow koloru z frontendowym color grading, klient klika kolor -> zdjecie sie zmienia, wybiera rozmiar -> cena sie aktualizuje, prosty formularz zamówienia.
To robi 90% marek premium (Luxum, KERA, Kast Concrete). Czas: ~8-12h vs ~40-120h. ROI na start jest dużo lepszy.
Harmonogram wdrozenia konfiguratora
Faza 1-2: Interaktywna galeria z wariantami
8-12h, najwyższa wartość- Zdjecia + kolory + cena
Faza 3: MVP konfiguratora 3D
~40h, wysoka wartość- 2 produkty, parametryczne modele, TresJS
Faza 4: Full konfigurator
~120h, srednia wartość- AR, terrazzo generator, kalkulacja real-time, 5+ produktow
Optymalizacja wydajnosci
- Draco compression na .glb - 10x mniejszy plik modelu
- LOD (Level of Detail) - niższy detail na mobile
- Lazy loading modeli - laduj model dopiero gdy klient klika produkt
- Baked lighting - precalculated shadows zamiast real-time
- Max 50k polygons per model - plynne 60fps na mid-range phone
Terrazzo generator (faza 4)
Podejscie 1: Proceduralny shader (GLSL)
ZaawansowanyNajszybszy rendering, ale trudny w implementacji.
Podejscie 2: Instance mesh
ŚredniSetki malych geometrii (kamyczkow) rozrzuconych po surface modelu.
Podejscie 3: Tekstura Canvas 2D
Rekomendowany na MVPProceduralnie generowana tekstura (Canvas 2D -> Three.js texture). Najprostsze, wystarczajaco realistyczne.
Rekomendacja terrazzo generator
Rekomendacja: Canvas 2D na MVP (najprostsze). Shader GLSL na full version (najwydajniejszy przy zlozonych wzorach).
WebXR / AR podglad (faza 4+)
Klient klika "Zobacz w swoim pokoju" -> kamera telefonu -> model umywalki na blacie. Three.js ma wbudowany WebXR. TresJS wspiera go przez <TresCanvas xr>.
Wymaga HTTPS i zgodnej przegladarki (Chrome Android, Safari iOS 16+). ~80% smartfonow wspiera to natywnie.
Laravel API — integracja konfiguratora
- Endpoint
- POST /api/configurator/quote
- Dane wejsciowe
- config (ProductConfig) + customer (email, name)
- Odpowiedz
- quote_id, price (PLN), estimated_delivery (3-4 tygodnie), config_snapshot
- Format quote_id
- 'SF-2026-0042' (prefiks marki + rok + numer sekwencyjny)
- Zapis
- Konfiguracja w DB (JSON column) - klient dostaje link do swojej konfiguracji
Powiazane dokumenty
| Dokument | Powiązanie |
|---|---|
| 24-strategia-cenowa.md | Bazowe ceny i marze - źródło stalych cennikowych |
| 06-produkty.md | Lista produktow do konfiguracji |
| 25-fotografia-produktowa.md | Źródło zdjec dla galerii wariantow i tekstur PBR |
| 38-raport-premium-produkty.md | BOM per produkt - dane do logiki cenowej |
| 23-branding.md | Kolorystyka, typografia - UI konfiguratora |