Transforming OEM Accessory Evaluation with a Real-Time 3D Product Configurator
The Client
Sutsnax is a solutions partner for automotive manufacturers and related industries, specializing in aesthetic and functional accessories, branding, and advanced technologies. The company works closely with OEM teams to design, engineer, and deliver components such as body kits, trims, decals, and other visual enhancements that elevate both brand presence and customer appeal.
The Objective
Sutsnax wanted to transform the way OEM stakeholders evaluate and select accessory packages.
The goal was to build a web-based 3D product configurator that would:
- Let users explore a vehicle in real time with full 3D control (rotate, pan, zoom).
- Enable toggling of individual components (body kits, trims, decals, etc.) and instantly visualize the impact on the vehicle.
- Work smoothly in the browser with no plugins, across modern desktop and tablet devices.
- Be built on a future-proof, flexible 3D stack so new models, parts, and even new product lines could be added without starting from scratch.
The Challenge
Before the configurator, the Sutsnax team and their OEM customers faced several friction points:
- Static and fragmented visuals
Product options were typically presented via PDFs, image decks, and occasional 2D/3D renders. Comparing different combinations required jumping between files, which made it hard for stakeholders to get a clear, holistic view. - Difficult to imagine full configurations
When evaluating multiple accessories together, e.g., a front body kit plus side cladding, rear garnish and decals teams had to mentally stitch the look together or request new renders for every combination. - Slow feedback loops
Each “what if we change this part?” question often meant sending a request back to design/engineering, generating new visuals, and circulating them again. This slowed down decision-making and added internal overhead. - Limited reusability
Previous visual assets were not structured as a reusable platform. Introducing a new vehicle model, a new trim package or expanding into another product line meant repeating a lot of work.
Sutsnax needed a single, interactive, browser-native experience that could centralize product visualization and bring configuration into the hands of the OEM decision-makers.
The Solution
Sutsnax developed a 3D Product Configurator that brings vehicles and accessories to life in the browser using Babylon.js and Three.js as the core 3D technologies.
1.Experience
- Interactive 3D vehicle viewer
Users can rotate, pan, and zoom around the vehicle, inspecting it from any angle, just like a digital showroom. - Component-level configuration
Key accessories (body kits, trims, decals, badges, etc.) are presented as toggles or options. Selecting or deselecting a component updates the 3D model instantly. - Clean, guided UI
A structured sidebar or control panel groups options into logical categories (front, side, rear, graphics, etc.), making it easy for OEM stakeholders to build and compare configurations without training. - Responsive and browser-based
The configurator runs directly in standard browsers, making it easy to demo in meetings, on the road, at events, or during remote calls.
2. Tech Stack Highlights
3D Engine & Rendering
- Babylon.js powers the real-time 3D rendering layer, handling scene management, camera controls, lighting, and physically based materials directly in the browser.
GLB (binary glTF) files are used as the primary 3D asset format. This ensures compact file sizes, fast loading times, and consistent rendering across browsers while supporting complex materials and hierarchies required for vehicle parts and accessories.
Frontend Application
- Built using core web technologies like HTML, CSS, and JavaScript to keep the configurator lightweight, fast, and easy to deploy without framework lock-in.
- A component-based UI (e.g., React or similar) to keep the configurator interface clean, reusable, and easy to extend.
Material Realism & Visual Quality
- A physically based rendering (PBR) material system was implemented to achieve highly realistic surfaces.
- Accessories and vehicle parts support glossy finishes, high-shine paints, and true metallic materials, closely simulating real-world automotive coatings.
- Accurate reflections, controlled roughness, and metallic values help OEM stakeholders clearly understand how each accessory or finish will look on the actual vehicle, reducing ambiguity during selection and approval.
Architecture & Content Management
- A data-driven configuration layer maps vehicle models, accessories, materials, and variants to their corresponding GLB assets and rules. New parts or options can be added by updating configuration data rather than rewriting core logic.
- Optimized 3D assets (reduced poly count, compressed textures, shared materials, and efficient mesh grouping) ensure smooth performance across modern desktops and tablets.
The Result
- OEM stakeholders can now see exactly what they’re buying – with realistic 3D views instead of abstract descriptions and static images.
- Sales and business development teams have a live, interactive tool they can use in pitches, workshops, and remote sessions.
- Sutsnax has a reusable 3D platform: new vehicle models, accessories, and even new product lines can be plugged into the existing framework built on Babylon.js and Three.js.
60+
Client Testimonial
200+
Global Brands
70+
Awards & Recognition
130+
Success Stories
Beauty & Fitness
Health
Our Solutions
