Sonic X Pro
Een interactieve 3D product configurator waarmee gebruikers hun eigen koptelefoon kunnen samenstellen door vorm, kleur en materiaal aan te passen.
Project documentation
Context
Sonic X Pro is een interactieve 3D product configurator gebouwd als opdracht voor het vak Technology 3. Voor de opdracht mochten we zelf kiezen welk product we wilden configureerbaar maken, ik koos voor een koptelefoon die ik de Sonic X Pro noemde.
De configurator laat gebruikers hun koptelefoon volledig naar zelf samenstellen. Ze kunnen kiezen tussen een ronde of ovale oorvorm, vier verschillende kleuren en drie materialen voor de oorkussens: polyester, katoen of leer. Elke aanpassing is meteen zichtbaar in het 3D model, zodat gebruikers een goed beeld krijgen van hoe hun configuratie er in het echt zou uitzien. Het doel was om dit op een premium en visueel aantrekkelijke manier te presenteren.
Challenge
Dit was een van mijn eerste projecten met React Three Fiber, en dat merkte je. Het leren werken met de library zelf was al een uitdaging, maar de materiaal- en modelwissels in realtime waren dat nog meer. Voor de vormwissel swap ik tussen twee aparte meshes, de ronde en de ovale variant. De kleuren en materialen wissel ik door te switchen tussen opties uit een object.
De opdracht vroeg ook om GSAP voor overgangen, maar ik had GSAP op dat moment nog niet goed genoeg onder de knie en heb het uiteindelijk niet kunnen gebruiken.
Result
Het eindresultaat voelt premium aan en de configurator werkt zoals bedoeld. Ik ben vooral tevreden over de algemene uitstraling van de website.
Terugkijkend is de code redelijk slordig, wat logisch is voor een van mijn eerste React Three Fiber projecten en zelf web projecten. Met wat ik nu weet zou ik de materiaal- en modelwissels veel beter aanpakken, GSAP integreren voor vloeiendere overgangen en de modellen preloaden zodat ze niet verdwijnen tijdens het switchen.