{
  "id": 16349595,
  "title": "How a Web-Based 3D Product Configurator Works: Models, Rules and Pricing",
  "url": "https://urgent.news/2026/10/24/how-a-web-based-3d-product-configurator-works-models-rules-and-pricing",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-24T17:27:31.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ikarusdelta/how-a-web-based-3d-product-configurator-works-models-rules-and-pricing-5b32"
  },
  "original_language": "en",
  "account": "A 3D product configurator allows customers to customize a product's appearance and specifications, while automatically updating prices and ensuring logical combinations. The core components of such a system are:\n\n1. The 3D asset, typically a model converted to glTF/GLB for web use. Each swappable part, like legs or handles, becomes its own mesh or node, and each finish is defined as a PBR material. Keeping polygon counts and textures small is important for mobile users.\n\n2. An option model that defines the configurable aspects of the product, such as size, fabric, and legs. This is simply structured as product → option groups → option values. Stored as JSON, the option model can be edited by merchandisers without needing a new deployment.\n\n3. Rules that prevent impossible combinations, like a heater only being compatible with larger sizes or a corner module requiring additional arm modules. These constraints are evaluated with every change, and invalid options are disabled to help customers understand why certain selections aren't available.\n\n4. Pricing is calculated on-the-fly based on selected values, which can include fixed price adjustments or formulas like cost per seat or per square foot. The pricing information is shown alongside the configuration, and can be exported as a quote PDF or sent to a CRM for B2B customers.\n\n5. Rendering and user experience are handled using libraries like Three.js, Babylon.js, or model-viewer. Interactive camera movements guide users through the configurable product, and lazy-loading techniques ensure the 3D scene doesn't slow down the page initially. A poster image is displayed first to maintain good Core Web Vitals.\n\n6. Augmented reality (AR) support is provided by exporting the current configuration to GLB or USDZ files, which can be viewed in Scene Viewer on Android or Quick Look on iOS, without requiring a dedicated app.\n\n7. Integration with e-commerce platforms like Shopify or WooCommerce is straightforward: when a customer adds a configured product to their cart, their configuration ID and line items are passed to the store's system. The full configuration is stored for production purposes.\n\nIn summary, a 3D product configurator is a web-based tool that combines 3D modeling, data-driven option management, rule-based logic, real-time pricing calculations, and AR capabilities to enable customers to customize products while keeping the experience smooth and intuitive.",
  "summary": "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)…",
  "key_points": [
    "3D asset converted to glTF/GLB for web use",
    "Option model defines configurable aspects of product",
    "Rules prevent impossible combinations during customization"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}