3D Product Configurator Development

3D Product Configurators for E-commerce

What is a 3D product configurator? It is an interactive 3D model of your product that runs in the shopper’s browser. They turn it, change colors, materials and parts, and see the result at once. The choices they make are passed to the cart, so the product they built on screen is the product they order.

We build online 3D configurators for brands that sell physical products with options: finishes, modules, sizes, layouts. The work starts from your CAD or an existing 3D model and ends as a working tool inside your store.

How a 3D configurator works: from CAD to your store

A configurator is a 3D model, a set of rules, and a connection to your cart. Building one runs through the same six steps every time.

1. Start from the model. Your CAD file or an existing 3D model of the product is the source, so every part and proportion is the real one.
2. Optimize it for the browser. CAD is built for factories and is far too heavy for a web page. The model is rebuilt lighter, with fewer polygons and baked textures, so it loads fast and still looks right.
3. Define what can change. Colors, materials, parts, sizes, and the rules between them. Which options exist, which combinations are allowed, what each one costs.
4. Build the viewer and the interface. The real-time 3D view and the controls around it are built to run in the browser, with no app to install.
5. Connect it to the store. The shopper’s choices are sent to the cart as the right product, variant and price.
6. Test it on phones. It has to work on a small screen and a slow connection, not only on a desktop.

Step 2 is the one buyers do not expect. Even when a good 3D model already exists, it usually has to be optimized for WebGL before it can run in a browser. We explain the basics in how to get an interactive 3D model on your website.

What you can configure (colors, materials, parts, size)

Anything that changes the product without changing what it is. In practice that falls into four groups, and they stack.

• Colors and finishes. Every colorway the product ships in, shown on the real geometry.
• Materials and textures. Fabric, leather, wood, metal, matte or gloss, on the parts where they apply.
• Parts and modules. Add-ons, accessories and components that are separate products in your store, added to or removed from the main one.
• Size and layout. Dimensions the shopper sets themselves. At the far end this becomes a planning tool: a fence configurator, for example, where the customer draws the fence line around a whole plot and the tool works out how many meters of fencing and which posts, gates and fittings the order needs.

The further down that list you go, the more of the work is logic rather than 3D.

Platforms: Shopify, WooCommerce, custom site (model-viewer, Babylon.js, Three.js)

First decide whether you need a configurator or only a viewer. They are different tools at very different prices, and plenty of stores only need the smaller one.

For a viewer, Google’s open source model-viewer exists to “easily display interactive 3D models on the web & in AR.” Shopify also handles 3D models as product media: its documentation explains that displaying them needs a compatible theme or a change to your theme code. If rotate and zoom is all you need, that may be the whole job, and it is much smaller than a configurator.

For a configurator, we build on Babylon.js, an open source engine whose stated mission is “to build one of the most powerful, beautiful, simple, and open web rendering engines in the world.” Three.js is the other common choice. Both run on WebGL in the browser.

On the store side, our configurators connect to Shopify, so a configured product lands in the cart correctly. On WooCommerce or a custom site the 3D part is the same and the cart connection is built for that platform. Tell us which one you run when you ask for the quote.

How much does a 3D product configurator cost?

From a few thousand dollars to about $40,000, depending on how much logic sits behind the 3D. Every configurator is specific, so these are frames to plan with, not fixed prices.

Two things move a project between levels: how many parts can change independently, and how much the tool has to calculate for the shopper.

These figures assume a 3D model of the product already exists. If it does not, 3D modeling comes first, at $400, $800 or $2,000 per model depending on complexity. And as above, an existing model usually still needs optimizing for the web.

Examples

A travel car seat with a live color selector. For WAYB we built an interactive 3D web experience of the Pico car seat with live color switching, and handed over the 3D model files in web-friendly GLB format so their own developers could rebuild and maintain it. Check it here.

A 3D configurator for Jasperosso shoes. Built in Babylon.js and rendered in real time, with no plugin or app. Check it out here.

A handbag concept demo. A real-time 3D bag with selectable colors and a camera that moves as you scroll. It is a concept piece we built to show the technique, not client work. View the demo.

When you do not need a 3D configurator

If your product comes in a handful of fixed finishes, you probably do not need one. A set of pre-rendered images for each finish does the same job, costs far less, and has nothing to maintain. That is covered on our 3D product images page.

A configurator earns its cost when the number of combinations is too large to render in advance, when parts are sold separately, or when the shopper has to plan something to their own dimensions.

FAQ