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.