A 3D model for your website that visitors turn and zoom in the browser

The model sits in the page where the main product photograph would be. A still image shows at once, and the model loads behind it. The visitor drags to orbit the product and pinches, or scrolls on a laptop, to zoom. Nothing is installed. The viewer is model-viewer, an open-source component that runs in the browser.

There are several models on our home page that you can turn now, including a lounge chair, a vase and pieces of equipment: open the live 3D models. They are the same kind of file we would deliver for your products.

A 360 product view made from photographs is a row of pictures taken around the product on a turntable. The shopper slides left and right through them. The product turns on one axis only, and the zoom stops at the resolution of the photographs.

A 3D model is the object itself. It turns in every direction, the shopper can look from above and below, and the same file can later be used for AR. The product has to be modelled first, which is more work than a photo spin.

If the product already exists, is easy to photograph, comes in few variants and you do not want AR, a photographed spin may be enough. We do not shoot those. If the product has many colours or finishes, is large or heavy, or is not manufactured yet, a 3D model is the more practical route.

There are three parts: the GLB file, the viewer and a place on your page. The GLB file holds the whole product, its shape and its materials, in a form that browsers can display. It is uploaded to your site like an image. The viewer is loaded by one line of script. A short tag on the product page then points the viewer to the file.

Some online store platforms accept a GLB file as product media. On others, and on a custom-built site, a developer adds the code. We supply the files and the code and help your developer add them. Our guide to adding a 3D model to a website sets out the steps.

A web page should not wait for a 3D model. The viewer shows a still image at once and loads the model behind it. How long the model takes depends on the size of the file, so we make each file as small as the product allows.

Three things make a model heavy: the number of polygons, the size of the textures and the number of separate materials. We reduce the polygons where the eye cannot tell, compress the geometry with Draco compression and size the textures for a phone screen. A flat-sided cabinet ends up much lighter than a tufted sofa. We tell you the size of each file on delivery. We do not promise a figure before we have seen the product.

The quote has two parts. The first is the modelling, quoted per model, with one model for each product. The charge depends on how complex the product is, what reference you can supply and how many colours or finishes are needed. If your factory or designer already has accurate 3D files, we optimise those and there is less to build.

The second part is the set-up: the viewer code, the still image shown while the model loads, and help getting the first model onto your page. This is done once and reused for every product after that. Adding AR means one more file per product, a USDZ for iPhone. Send the product list and a link to your site for a quote.