3D product configurators: how they are built and what they cost

There is a working one below. It runs in your browser, with no plugin and no app to install. This guide covers what a 3D product configurator actually is, the two ways they get built, where the cost really sits and how to brief one without wasting money.

What a 3D product configurator actually is

A 3D product configurator is a piece of a website that loads a three dimensional model of a product and lets the visitor change it, inspect it or take it apart, with the view updating immediately. The model is rendered live by the browser rather than being a set of pictures taken in advance.

That live rendering is the whole distinction. A spinning animation is a video. A set of photographs you click between is a gallery. A configurator holds one model in memory and recalculates what you see every time you change something, which is why it can handle combinations nobody anticipated.

The technology underneath is WebGL, usually through a library called Three.js, and it has been supported by every mainstream browser for years. Nothing is installed. The page loads a model file and some code, and the visitor's own graphics hardware does the drawing.

What you are looking at above

The demo at the top of this page is the engineering end of the same technology. It is an illustrated parts catalogue for an industrial centrifugal pump: 61 individually selectable components across 35 part numbers, down to the individual casing bolts and washers.

Click any part in the 3D view and its record appears, with a part number and a category. Click a row in the parts list instead and the corresponding component highlights in 3D. Where a part number covers eight identical bolts, selecting that line highlights all eight, because instances and part numbers are tracked separately. The explode slider pulls the assembly apart along defined paths, and on the gearbox it runs a staged disassembly in the order you would actually take it apart.

Two honest caveats, because they matter if you are judging the technique rather than the object. This is a demonstrator built from reference photographs, not a manufacturer's CAD, so treat the geometry as representative rather than dimensionally exact. And it is not a colour configurator. It changes what you can see and select, not what you can buy. Our product viewer experiment is the consumer-facing version of the same engine.

Real-time 3D versus pre-rendered images

There are two ways to build product visualisation, and picking the wrong one is the most expensive early mistake.

Pre-rendered means an artist renders every variation as an image, and the website swaps pictures as the visitor clicks. The pictures look superb, because they were rendered offline with no time limit. The problem is arithmetic. Five body options, six colours and four finishes is a hundred and twenty images, and every product change means rendering the set again.

Real-time means one model, drawn live, with materials and visibility changed on the fly. Quality is a notch below a slow offline render, though the gap is smaller every year. In exchange the combinations are effectively free, the visitor can rotate to any angle rather than the twelve you rendered, and updating a colour is a data change rather than a new render run.

If the product has a handful of fixed variants and photography is the selling point, pre-rendered images are the cheaper, better answer. If the combinations multiply, or the visitor needs to interrogate the object rather than admire it, real-time is the only thing that scales.

The part most people miss: the data behind the geometry

Most configurator projects are scoped as a 3D job. The 3D is the visible half, and usually the half that goes to plan. The half that causes trouble is the data.

Every component in the model needs a stable identifier, and that identifier has to survive the next revision of the model. If the mapping between geometry and part record lives in someone's naming convention, it breaks the first time the model is re-exported and a mesh comes back named differently.

In the demo above, the parts data is not baked into the model. The model is one file and the component records are a separate data file that the viewer loads at runtime. That separation is the point: the same viewer loads a completely different machine by pointing it at different data, which is why the gearbox in the dropdown works at all.

In this demonstrator that data file is a static file standing in for what would be a real connection to your parts database or ERP system in production. The contract between viewer and data stays the same either way, which is what makes the swap possible later without rebuilding the front end.

Two jobs that look identical and are not

Configurator projects fall into two families, and they are graded on different things.

Selling

An ecommerce product configurator exists to move someone from browsing to buying. It needs to look excellent, load fast on a phone, and end at a valid, priced, orderable specification. Success is measured in conversion rate and in fewer wrong orders.

Identifying and servicing

An aftersales or technical viewer exists so a technician, parts specialist or engineer can find the right component and order the right part. It needs accurate part numbers, sensible search and the ability to isolate one item inside a crowded assembly. Success is measured in fewer misidentified parts and shorter calls.

Both use the same underlying technology. They should not be scoped from the same brief, because a beautiful configurator with unreliable part numbers is useless to the second audience, and an exhaustive parts catalogue is a poor way to sell a sofa.

What drives the cost of a 3D configurator build

We will not print a single number here, because a real figure depends on things a guide cannot know about your product. What we can do is name the variables honestly, so you can tell whether a quote you have been given is thoughtful or optimistic.

Quote the work as two separate streams. Conflating them is the most common reason these projects overrun.

Stream one: the viewer

Building the browser application. The cost moves with the maximum size of the assembly, the number of components, which devices and browsers must be supported, how complex the data connection is, whether logins and permissions are needed, and whether service or assembly procedures are in scope.

Stream two: preparing the model

Getting a model that the viewer can use. The cost moves with the quality of the source material you can supply, the visual accuracy expected, the component count, whether internal and hidden parts are needed, how much fastener detail is required, and how many rounds of review and approval you want.

The single biggest swing factor is the second stream, and specifically whether you already have usable CAD. Clean, properly separated CAD makes model preparation a conversion task. Photographs and a paper parts diagram make it a modelling project, which is a different order of work. If you are still working out what a web build should cost in general, our guide to UK website costs covers the wider picture, and our development page explains how we scope this kind of work.

How to brief one without wasting money

Five things, settled before anyone quotes, will save you more than any negotiation.

• Name the decision. What should someone be able to do at the end that they cannot do now? Choose a specification, identify a part, understand how it fits together. One clear answer.
• Find out what CAD you own. Not what exists somewhere, but what you can hand over and are licensed to use. This moves the price more than anything else on the list.
• Decide who owns the part data. If part numbers live in an ERP system, say so early. Retrofitting a live data connection is far more expensive than planning for one.
• Set the device floor. A mid range Android phone on mobile data is a real constraint on model size, and it is much cheaper to design for than to fix afterwards.
• Start with one product. One product, done properly, tells you what the rest will cost. A ten product rollout scoped up front tells you very little and commits you to all of it.

FAQ