How to Get 3D Configurators Right
Interactive product viewers that let a customer change materials, colors and options and see the result immediately.
Imogen Clarke
The key figures
- Combinatorial growth
- options multiply; photographing every combination is impractical
- Asset approach
- one model, with materials and parts switched at runtime
- Performance
- the whole configuration set must fit a sensible download budget
- State
- configurations should be shareable by URL
- Fallback
- a static image path for devices that cannot render
Why this is worth getting right
They answer the question photography cannot — what this specific combination looks like — and the engineering problem is combinatorial, not visual.
Do this, not that
Do
- Model once and swap materials and parts rather than shipping a model per variant
- Encode the configuration in the URL so it can be shared and returned to
- Load the default configuration first and fetch options on demand
- Provide static imagery as a fallback
- Validate that every combination the interface allows is actually buildable
Don’t
- A separate model per configuration
- Loading every texture for every option at start-up
- Configurations that cannot be linked to or saved
- Allowing combinations the product cannot actually be ordered in
When to bring in help
Our advice Bring in help when option counts have made the asset set unmanageable, when a configurator must integrate with pricing or ordering, or when performance fails on mobile.
Where this comes from
- Khronos Group — glTF and asset delivery
- Three.js — Interactive scene documentation
- Shopify Developers — Product media and 3D models
The figures and practices above come from the sources listed.
Working on something like this?
We take on 3D Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
