De Campooz Lazy Jack is een vouwwagen met een modulair systeem van luifels en uitbreidingen. Maar hoe laat je klanten al die mogelijkheden ervaren voordat ze kopen? Precies — met een 3D configurator.
Dit project is geen echte klantcase, maar een showcase. We wilden laten zien wat er mogelijk is als je een interactieve 3D-productconfigurator koppelt aan een volwaardig e-commerceplatform.
De Campooz Lazy Jack was daar het perfecte onderwerp voor: een product met genoeg configuratiemogelijkheden om het interessant te maken, en een doelgroep die baat heeft bij visuele configuratie.
Bekijk de configurator hier: https://campooz.elgentos.io
Een vouwwagen koop je niet elke dag. En als je er eentje koopt, wil je precies weten wat je krijgt. De Campooz Lazy Jack heeft vijf optionele uitbreidingen — van een Trekking Luifel tot een Camping Luifel en de Ugly Betty achteruitbreiding — elk met invloed op de totale afmetingen en prijs. Dat is lastig voor te stellen op basis van een productpagina met wat foto's.
De uitdaging: een configurator bouwen die dit tastbaar maakt. Klanten moeten in een 3D-omgeving hun ideale opstelling kunnen samenstellen, direct de afmetingen zien, en het resultaat met één klik in hun winkelwagen kunnen plaatsen.
We bouwden een op maat gemaakte 3D configurator met Three.js en Preact, gekoppeld aan Magento 2 via een custom connector-module.
3D-modelontwikkeling
Het 3D-model van de Lazy Jack is in Blender opgebouwd en geëxporteerd als GLB-bestand. Elk onderdeel — de basistrailer, Trekking Luifel, Camping Luifel, Turbo Luifel, Extra Trekking Luifel en Ugly Betty — is als apart object gemodelleerd, zodat ze onafhankelijk aan- en uitgezet kunnen worden.
Interactieve configuratie
Via een overzichtelijk paneel selecteer je je gewenste uitbreidingen en kleurstelling. De 3D-weergave past zich direct aan. Inclusief maatlijnen die de exacte afmetingen tonen van jouw specifieke configuratie — van 9,2 meter breed voor het basismodel tot ruim 14 meter met alle uitbreidingen.
Dynamische prijsberekening
Het basismodel start vanaf €12.250. Elke toevoeging heeft een vaste meerprijs (bijvoorbeeld €750 voor de Camping Luifel of €474 voor de Ugly Betty). De totaalprijs wordt real-time berekend en getoond.
Magento 2-integratie
De echte kracht zit in de koppeling. We bouwden een Magento 2-connector die de configuratie — inclusief geselecteerde opties, berekende prijs en een screenshot van de 3D-configuratie — direct in de winkelwagen plaatst. De screenshot wordt meegenomen als productafbeelding in het bestelproces, zodat zowel klant als verkoper precies weten welke configuratie is besteld.
Preact + Three.js — Lichtgewicht frontend die als widget op elke pagina ingebed kan worden
GLB-modellen uit Blender — Geoptimaliseerde 3D-modellen met meerdere materiaaltexturen
Dynamische maatlijnen — 9 voorgedefinieerde combinaties met exacte afmetingen in meters
Server-side prijsberekening — Prijzen worden in Magento berekend, niet in de browser, ter voorkoming van manipulatie
Screenshot-export — De configuratie wordt als PNG opgeslagen en meegegeven aan het orderproces
Custom cart-integratie — Geconfigureerde opties worden als additional_options aan het quote-item gekoppeld en doorgetrokken naar de order
Dag/nacht-simulatie — Een tijdslider past de belichting aan voor een realistische sfeerimpressie
Het resultaat is een volledig werkende proof of concept die laat zien hoe een 3D configurator naadloos kan samenwerken met een e-commerceplatform. Van het draaien en configureren van een vouwwagen in de browser, tot het afrekenen in Magento met de exacte configuratie als orderregel — het hele traject werkt end-to-end.
Dit project demonstreert onze aanpak: we combineren creativiteit met technische diepgang. Dezelfde architectuur — een standalone configurator-widget met een headless koppeling naar het e-commerceplatform — is toepasbaar op elk configureerbaar product, van meubels tot machines.
Three.js — 3D-rendering en scene management
Preact — Lichtgewicht componentframework
Blender — 3D-modellering en texture baking
Magento 2 — E-commerceplatform met custom connector-module
Webpack — Module bundling en build-optimalisatie
Vercel — Hosting en deployment van de configurator
We bouwen 3D configuratoren niet omdat het een leuke technische exercitie is — al is het dat ook. We bouwen ze omdat ze aantoonbaar werken. Een goed gebouwde configurator versnelt het verkoopproces, vermindert retouren en geeft klanten vertrouwen in hun aankoop.
Deze showcase hebben we gebouwd om te laten zien wat er kan. Geen vage concepten, maar werkende software die je kunt aanraken, draaien en bestellen. Heb je een product dat baat heeft bij visuele configuratie? Dan praten we graag verder.
Ook zo'n gave 3D configurator?
Neem contact op!
