The 6 stages of building a configurator
A practical configurator plan, whether it uses three.js, Babylon.js, or a SaaS platform such as Threekit, Expivi, or ShapeDiver, needs six connected workstreams. Their exact order and depth depend on the product, destination and implementation boundary.
- 1
Define configuration rules and variants
Document every option, the dependencies between them, and the constraints. This rules tree is the spine of the entire project: pricing, validation, SKU mapping, and 3D asset planning all derive from it.
- 2
Choose a rendering engine
Compare three.js, Babylon.js,
<model-viewer>, and managed platforms against the team's implementation needs, target devices, asset complexity, interaction scope, and operating responsibilities. - 3
Build the 3D asset pipeline
Map source assets, product variants, component hierarchy, materials, delivery formats, and destination-specific checks around a representative product.
- 4
Wire up the configurator UI
Bind the rules tree to mesh visibility, material swaps, camera presets, and live pricing. A shared state model can support deep-linking, undo, and analytics when those capabilities are included in the implementation scope.
- 5
Integrate with e-commerce
Map configuration state to a SKU on Shopify / BigCommerce, or to a custom quote payload for B2B. Persist a configuration ID so the customer service team can reopen the exact view.
- 6
Test and ship
Agree target devices, network conditions and acceptance criteria. Measure loading and rendering with the representative asset, then document fallbacks and handoff responsibilities.
1. Define configuration rules and variants
Before a single polygon is modeled, write the rules tree in a spreadsheet. List every option group (frame, fabric, leg style, size), every option inside it, and every dependency (e.g. "this leg style is only available in oak"). Record which choices change geometry, which change only a material, and which are commercial rules.
Map each valid combination to the relevant product ID, SKU or price rule. Reconcile the option matrix with the front-end, 3D, product-data and manufacturing owners so they use the same identifiers. This reduces the risk of presenting combinations that cannot be ordered or produced.
2. Choose a rendering engine
three.js
Direct control of the web experience, scene structure, shaders and custom interactions, with engineering ownership of the runtime.
Babylon.js
A web engine with TypeScript support and built-in rendering and interaction features that match the team's implementation needs.
A focused product viewer or AR entry point is needed without a full configuration rules application.
Threekit / Expivi / ShapeDiver
A managed platform's asset hosting, rules tools, connectors and operating model fit the product and team.
Compare the same representative product in the shortlisted destination. Check rules, asset import, materials, accessibility, supported devices, commerce integration, data ownership and who will maintain each layer. Platform selection is a scope decision.
3. Build the 3D asset pipeline
A configurator is not simply a 3D model with options placed on top. The asset structure has to correspond to selectable components, material choices and the destination's runtime requirements. Start with one representative product and document this handoff:
- Inventory the available CAD, existing models, drawings, dimensions, photographs and approved material references.
- Identify reusable and unique geometry across the product family before deciding which meshes or files can be shared.
- Separate selectable components in a hierarchy that corresponds to the agreed option matrix and destination behavior.
- Name files, objects, materials and product IDs consistently so the 3D and commerce teams can map the same options.
- Prepare UVs and PBR materials for the chosen renderer, using the texture channels and color-space handling it supports.
- Agree geometry, texture, draw-call and loading budgets against the actual target devices and viewing context.
- Export the required delivery formats and preserve any editable source files included in the agreed handoff.
- Import and review the representative asset in the destination before extending the workflow across the catalog.
Use the sample review to record visible accuracy, material behavior, option mapping, loading and rendering observations, known limitations and approval. A passed source-file check is not the same as acceptance in the destination. Keep the review criteria with the accepted asset version.
Asset handoff checklist
The handoff should name the product IDs, component hierarchy, geometry and material variants, coordinate system, units, pivots, texture channels, file formats, target platform and supported test cases. Record who owns configurator rules, storefront or application code, hosting, product data and final acceptance.
Seven Studio's 3D product configurator services scope asset preparation and implementation responsibilities around an agreed destination. Geometry can be scoped through 3D product modeling, while material production is covered by the PBR texturing for ecommerce: maps, UVs and QA.
Check format capabilities against the destination rather than assuming one export fits every channel. Use the Khronos glTF specification and ecosystem resources for web delivery, and Apple's AR Quick Look documentation for its supported inputs and web handoff. Platform guidance can change, so record the source and review date in the project brief.
4. Wire up the configurator UI
Keep configuration state in one governed model, whether that uses application state or platform tooling. The option controls, 3D scene, pricing and availability logic should resolve the same selection identifiers. Decide explicitly how deep links, undo and analytics events will read that state.
Use the representative product to decide what loads initially and what can be deferred. Test camera controls and useful preset views with the intended audience, and provide a suitable fallback for contexts where the interactive experience is unavailable.
5. Integrate with e-commerce
Map the configuration state to the product, variant, line-item or quote structure that the chosen commerce system supports. Some option sets fit native variants; others need an app, custom implementation or a quote workflow. Confirm limits and responsibilities with the commerce implementer before the asset hierarchy is locked.
Preserve enough configuration data for the order or quote to be reconstructed, and test invalid, unavailable and review-required combinations. Shopify documents current theme behavior in its variant guidance.
6. Test and ship
Define project-specific acceptance checks before launch:
- Record the target browsers, devices, network profiles and viewing distances.
- Measure initial application and asset loading separately, then test deferred option assets.
- Review geometry, materials, scale, camera behavior and every scoped option state.
- Test keyboard operation, labels, reduced-motion behavior and the agreed non-3D fallback.
- Verify cart, quote or lead handoff with valid and invalid configurations.
- Save the tested asset versions, results, limitations and approval owner.
Frequently asked questions
How long does it take to build a 3D product configurator?
Timing depends on the number of product families, source-asset readiness, rules complexity, platform access, integrations, review rounds and acceptance criteria. Scope and approve a representative product before committing to a wider rollout.
What does a 3D product configurator cost?
Cost depends on asset production, product and rule complexity, platform fees, custom interface work, commerce or back-office integrations, testing and ongoing ownership. Keep platform, implementation and 3D asset costs distinct in the quote.
Three.js or a SaaS platform like Threekit?
Consider three.js or Babylon.js when the team needs direct control of the experience and runtime. Consider a SaaS platform when its managed tools, connectors and operating model fit the requirements. Validate either choice with a representative product.
What 3D file format should I use?
Choose the format for the destination. glTF or GLB is widely used for web delivery and real-time engines. Apple Quick Look accepts USDZ or Reality content. A commerce platform may convert or optimize uploaded files, so confirm its current requirements and review the resulting asset.
Do I need new 3D models, or can I reuse CAD files?
CAD or an existing 3D model can be a useful source, but suitability depends on geometry, hierarchy, materials, rights and the target runtime. Review a representative file before deciding whether to convert, simplify, rebuild or supplement it.