Sonic X Pro

Sonic X Pro is an interactive 3D product configurator built as an assignment for the course Technology 3. For the assignment we could freely choose which product we wanted to make configurable. I chose a headphone and named it the Sonic X Pro.

The configurator lets users build their headphone entirely to their own taste. They can choose between a round or oval ear cup shape, four different colors and three materials for the ear cushions: polyester, cotton or leather. Every change is immediately visible in the 3D model, giving users a clear idea of what their configuration would look like in real life. The goal was to present this in a premium and visually appealing way.

This was one of my first projects with React Three Fiber, and it showed. Learning to work with the library itself was already a challenge, but the real-time material and model swapping was even more so. For the shape switch I swap between two separate meshes, the round and the oval variant. Colors and materials are switched by cycling through options from an object.

The assignment also required GSAP for transitions, but at that point I did not have a good enough grasp of it yet and ended up not being able to use it.

The end result feels premium and the configurator works as intended. I am most satisfied with the overall look and feel of the website.

Looking back, the code is fairly messy, which makes sense for one of my first React Three Fiber projects. With what I know now I would handle the material and model switching much better, integrate GSAP for smoother transitions and preload the models so they do not disappear when switching between configurations.