How a Web-Based 3D Product Configurator Works: Models, Rules and Pricing

Ikarus delta — Sat, 24 Oct 2026 17:27:31 +0000

If you've ever wondered what's behind a 3D product configurator, the kind that lets you change a sofa's fabric and see the price update, here's the architecture in plain terms.

1. The 3D asset : Everything starts with a model, usually converted from CAD into glTF/GLB for the web (and USDZ for iOS AR). The key decision is how you split it: every part a buyer can swap (legs, arms, bench, handle) becomes its own mesh or node, and every finish becomes a PBR material. Keep polygon counts and texture sizes tight. Mobile is where most buyers are.
2. The option model : Options are data, not code. A simple structure:
product → option groups (size, fabric, legs) → option values → which nodes/materials each value shows or hides.
Store it as JSON so merchandisers can change it without a deploy.
3. Rules: Rules stop impossible combinations: "heater X only with sizes ≥ 6 ft", "corner module requires two arm modules". Express them as constraints evaluated on every change, and disable (don't hide) invalid values so buyers understand why.
4. Pricing: Each value carries a price delta or a formula (per seat, per square foot). Recalculate on every change and show the breakdown. For B2B, the same engine produces a quote PDF or pushes line items to a CRM (visual CPQ).
5. Rendering and UX : Three.js, Babylon.js or model-viewer render the scene. Guided camera moves to the part being configured make complex products easier to understand. Lazy-load the 3D below the fold and show a poster image first to protect Core Web Vitals.
6. AR: Export the current configuration to GLB/USDZ and hand it to Scene Viewer (Android) or Quick Look (iOS). No app required.
7. Integration : On "add to cart", pass a configuration ID and the line items to the store (Shopify, WooCommerce, custom), and store the full configuration for production.
That's the whole stack: asset, option data, rules, pricing, renderer, AR and integration. If you'd rather read a non-technical overview, here's a guide to what a 3D product configurator is and how buyers use it.

(Written by the team at Ikarus Delta. We build and run configurators for manufacturers.)

DEV Community: Ikarus delta

How a Web-Based 3D Product Configurator Works: Models, Rules and Pricing