Definition 3D product configurator

A 3D product configurator is a real-time application (WebGL, Unity or Unreal Engine) in which users can change parameters such as color, material, dimensions or accessories live. The system renders each variant photorealistically - right up to the AR preview in the room. The result is a digital sales consultant without opening hours.

Rotate and zoom the product freely - 360° experience in the 3D furniture configurator from Danthree Studio.

Why is a 3D configurator worthwhile?

Technology basics

• Engine: Three.js / WebGL for lean browser deploys, Unity for cross-platform apps or Unreal with pixel streaming for high-end visuals.
• Asset format: glTF / GLB (compact, PBR-capable) - supplemented by metalness and roughness maps (→ Metalness Map).
• E-commerce API: REST / GraphQL hooks to Shopify, Magento or SAP CPQ.
• AR export: USDZ (iOS) or glb + SceneViewer (Android).

Six quick tips that no 3D configurator project should be without

Pre-rendered 3D configurator vs. real-time rendering

Besides pixel streaming and Native WebGL there is a third approach that is often overlooked: the pre-rendered configurator. Here, all the required product variants are generated in advance as high-resolution renderings or sprite sheets and only swapped like images at runtime.

Practical table - software stacks in comparison

Change fabrics, woods & colors live - real-time material picker in Danthree Studio's 3D configurator.

Workflow - from CAD to live configurator

1. Set goals & KPIs
   • Conversion, upsell rate, lead generation.
2. Data audit & 3D asset preparation
   • CAD ⇢ Low-poly / LOD, uniform Texel density.
   • PBR scanning for fabric & wood samples.
3. Look-Dev & UX-Prototype
   • Define color and material system.
   • Wireframes for step-by-step configuration.
   • Proof of concept - see example of what a brand space can look like Project Interactive brand space.
4. Engine set-up & performance tuning
   • LOD-Switches, Texture Compression (< 4 MB Initial-Load).
   • Metalness maps for realistic reflections.
5. E-commerce integration
   • Variant API, price logic, shopping cart hook.
   • AR integration: Example → Unity × Bosch Rexroth.
6. QA & beta launch
   • Cross-Browser-Tests, Lighthouse-Scores < 3 s TTI.
   • Usability session with 5 people.
7. Roll-out & showroom linking
   • Embedding in virtual reality tour(service page).
   • Teaser clips for social & POS QR codes.‍

Tip: Our VR tour for interior brands shows what the process looks like in practice - there you can see how a configurator is embedded directly in the showroom.

Important comparison: Pixel streaming vs. native WebGL

FAQ - 3D product configurator

What is the difference between a 3D configurator and a normal variant dropdown?

The configurator shows each selection as a photorealistic 3D view - with zoom, shadows and real-time reflections. This reduces uncertainty and increases the completion rate.

Which engine is best for furniture configurators?

For high-end furniture with elegant surfaces, we recommend Unreal Engine 5 (see Audi showroom with UE4 → Unreal Spotlight). Mobile-first projects benefit from Three.js.

Can I transfer my configurator to AR or a showroom later?

Yes - glTF/GLB assets can be integrated 1-to-1 into AR apps (see BMW AR Showroom → BMW AR) or our 3D Virtual Showroom.

How do I measure ROI?

Important KPIs: Config interactions, add-to-cart rate, average shopping cart value. At our customer Bosch Rexroth, the lead rate increased by 30% after the Unity launch.

What data do I need to get started?

CAD files or technical drawings, CI colors, material samples. We digitize missing models via PBR scan (workflow details → UV mapping glossary).

Can I connect the configurator to my ERP / PIM system?

Yes - parts lists, prices and stock levels can be called up live via REST or GraphQL APIs. Many brands link the configurator to SAP PIM or Akeneo; this means that variant data and pricing logic are maintained centrally.

How large can a web configurator be without affecting the loading time?

Als Faustregel gilt: Initial Load < 4 MB und Time-to-Interactive < 3 Sekunden. Das erreicht man mit Draco-komprimierten glTF-Assets, Texture-Streaming und einem schlanken Three.js-Frontend.

What license models are available for Cloud 3D Configurators?

There are three main models: SaaS tariffs, where the price is based on the number of uploaded assets (such as Sketchfab Business); usage-based billing based on cloud credits, such as Pixel Streaming uses in Unreal; and one-off enterprise licenses, where the software is hosted on-premises, such as Threekit. Which model makes sense depends primarily on the expected traffic volume and the IT compliance requirements of your company.

How do I protect my 3D data from unauthorized download?

HTTPS, token-controlled asset URLs and glTF Draco obfuscation make copying more difficult. For highly sensitive CAD geometry, we recommend server-side rendering (pixel streaming) - this only sends video frames to the user.

What happens if I want to introduce new product lines?

Thanks to the modular asset library, it is sufficient to prepare the new model once in PBR quality ; it can then be reused immediately in the configurator, in the virtual showroom and in the 360-degree view. This allows brands to scale their content without additional photo shoots.