JopaMX Configurator

JopaMX is a company that designs and produces custom motocross suits. Assembling such a suit used to involve back-and-forth email contact between JopaMX and the customer: sending colors, adjusting designs, returning examples, another round of feedback. That cost a lot of time on both sides.

In the summer of 2024, I started this project through Rohaan IT to build a solution: an interactive 3D configurator that allows customers to assemble their complete suit themselves. Choose colors, add logos and images, and see the end result in 3D immediately. Is the suit to your liking? Then the customer can put it directly in the shopping cart and checkout, without JopaMX's involvement. The order then comes in neatly, ready for production.

Within this project, I developed the complete frontend, plus part of the backend. Concretely, that comes down to:

• The interactive 3D environment where the suit is displayed and can be viewed from any angle
• The complete configuration system allowing individual panels of shirt, pants, and paddock mat to be customized
• Live rendering of color changes and uploaded images directly on the 3D model
• The logic behind detecting which panel a customer clicks in the 3D view
• The complete ordering process so that an assembled suit can be ordered directly
• An automated import script that converts designs to print-ready format within the graphic software
• A pipeline for rendering design previews in the backend, so customers can also see a 3D preview of their design outside the configurator

The configurator is built in Vue 3 with ThreeJS. In the background, an SVG is rendered that represents the suit one-to-one. With each change, that SVG is updated live, converted to a PNG, and projected onto the model as a texture via UV mapping. The same SVG data can later also be used for production, without extra conversion.

The biggest challenge was performance. Each adjustment means rebuilding the SVG, rasterizing it, and sending it to the graphics card, which causes stuttering on the main thread. Using an OffscreenCanvas, I moved that process to a separate thread. Also by cleaning up and reusing objects, lights, and textures, memory usage stays stable as the user makes more adjustments.

Additionally, the design had to be made print-ready. Screens work with RGB while printing presses work with CMYK. To process this correctly, I built an automated import script that processes each layer of the SVG within the graphic software so that the print result matches what the customer saw in the configurator.