Getting a 3D Product Configurator to Load Fast on a Partner's Website

For Milwaukee Tools we built the Bolt-On 3D Web Configurator, a 3D product configurator designed to plug into Milwaukee's partner websites. People customise a product, then add it to their cart without leaving the partner's site. It is a good example of a brief where the technology has to be invisible.

The first constraint is that the configurator is a guest. It lives inside someone else's page, with their fonts, their layout and their patience. If it loads slowly, the partner's site looks slow, and nobody blames the configurator in isolation. So the 3D models were designed and optimised specifically for the web, rather than being converted from rendering assets. A model built for a render can carry millions of polygons. A model built for a browser has to look convincing with a small fraction of that.

The second constraint is the connection to the shop. We built a custom API that links Milwaukee's backend to a responsive frontend, so the choices a user makes in 3D map straight onto real products and a real basket. The configurator is only useful if what you build on screen is exactly what you can buy.

The third is hosting. Everything runs on Milwaukee's existing infrastructure, so there is no new service for their team to learn or pay for, and the data stays where they already manage it.

Our rule of thumb for web 3D is to decide the loading experience first. What does a visitor see in the first second? We aim for something useful on screen quickly, with detail arriving in stages rather than a blank box and a spinner.

One practical point is worth repeating: test on a mid-range phone on a mobile connection, not just a studio machine, because that is where most partner-site visitors will be.

The live demo is on our demos page, and the wider Milwaukee work is on its case study page.