All Resources
ArticleWeb Dev2026-03-09

Building 3D Configurators for Manufacturing

How to build browser-based CPQ configurators using React and Three.js. Covers parametric geometry, material systems, real-time pricing, and integration with manufacturing workflows.

Why 3D Configurators Matter

In manufacturing, the sales cycle often looks like this: customer asks for a quote → engineer spends hours modeling the custom configuration → sales sends a quote days later. 3D configurators collapse this into minutes.

A well-built configurator lets customers (or sales reps) select options, see the product update in real-time 3D, and get an instant quote — all in the browser.

The Tech Stack

The modern stack for manufacturing configurators:

  • React — component-based UI for the configuration panel
  • Three.js / React Three Fiber — 3D rendering in the browser
  • Zustand or Redux — state management for configuration options
  • Node.js or Python backend — pricing engine, order submission, CAD file generation

Parametric Geometry

The key challenge is making geometry respond to parameters. There are three approaches:

1. Procedural Geometry

Build shapes programmatically using Three.js BufferGeometry. Best for simple products (enclosures, brackets, ductwork) where geometry follows clear mathematical rules.

2. Morph Targets

Pre-model several configurations in your CAD tool, export as glTF with morph targets, and blend between them. Good for organic shapes where procedural generation is impractical.

3. Part Swapping

Load different 3D models based on selections. A door configurator might swap between panel, glass, and louver inserts. Simple and predictable.

Material System

Three.js PBR materials (MeshStandardMaterial) support metalness, roughness, and environment maps that make products look realistic. Pre-bake material presets for common finishes: brushed aluminum, powder-coated steel, anodized colors.

Real-Time Pricing

The pricing engine should run on every configuration change:

  • Material cost = area × material rate
  • Manufacturing cost = operation count × labor rate
  • Markup and margin applied per business rules

Keep the pricing logic on the server if rates are sensitive. Otherwise, client-side pricing gives the best UX (instant updates).

Integration with Manufacturing

The configurator's output should feed directly into your manufacturing pipeline:

  • Generate a CAD file (DXF, STEP) from the configuration parameters
  • Create a work order in your ERP with the BOM and routing
  • Send to nesting software for sheet metal parts

This is where the configurator pays for itself — no manual re-entry of dimensions, no interpretation errors.

Three.jsReactCPQ3DConfigurators