A 3D product viewer on four products, and what each one needed from it

A 3D product viewer puts the product itself on the page. The shopper turns it and zooms in, and on a phone can stand it in the room. Below are four products in the viewer we use on this site. Each one needed something different from it.

The parts inside a gaming PC

Someone buying a gaming PC wants to see what is in the case. A photo shows it from one angle. Here the shopper can look in from any side and go close to a part.

Four parts carry a marker: the graphics card, the processor under its cooler, the memory and the ports on the front. Each marker holds one fact from the shop's product data, such as "8 GB" on the graphics card. The markers are hotspots fixed to the parts themselves, behind the glass. They turn with the model and fade when their side faces away from the camera.

The power supply has no marker. It sits under a cover, and a marker there would point at a closed panel.

How fast this loads depends on the file. The source file for this computer was 18.2 megabytes, and six of its ten textures were 4,096 pixels wide. On this page the file is 1.1 megabytes. The large textures went to 2,048 pixels, all of them are stored as WebP, and the geometry is compressed with Draco. The model still has its 108,000 triangles.

A grill in two colours and three sizes

The grill comes in black and red, and in three sizes. The viewer handles colour and size in different ways.

A colour is a material. Both colours are in the same file as material variants, and switching between them downloads nothing.

A size is another object. The large and medium grills stand on a frame with wheels and have side trays. The small one stands on feet and has a handle on each side. Each size is its own file, between 1.6 and 2.6 megabytes, and it is fetched when the shopper picks it.

The details follow the size. The trays are a detail of the two larger grills and the handles are a detail of the small one. The measurements are read from the model once it has loaded: 137 cm across the trays for the large grill, 50 cm for the small one.

An e-bike measured against its catalogue size

The viewer measures this bike at 170 cm long, and the shop's product page gives the same figure. When the two agree, the measurements can come straight from the model, and the shopper can switch on the dimension lines to see where each one runs.

We check this for each product, because the two can differ. One of the table lamps on this site has a cord that trails behind it in the model, and the measured size included the cord. For that lamp the viewer shows the catalogue's figures and leaves the measured ones out.

The labels are checked the same way. A viewer calls the three sides width, depth and height by default. For the bike they are set to length, width and height.

The three colours arrived as three files of about 14 megabytes each. On this page they are one file of 2.9 megabytes with the colours as variants.

An armchair that goes on to AR

For furniture the viewer also hands the model to the phone's AR. On an iPhone it opens AR Quick Look with a USDZ file. On Android it opens Scene Viewer with the GLB. A computer has no camera to point at the floor, so there the button shows a code to scan with a phone.

The AR file is heavier than the one on the page. The armchair's USDZ is 8.9 megabytes, because USDZ has nothing like Draco and keeps its textures as JPEG or PNG. It is downloaded when the button is pressed.

What the shop supplies

• The 3D model, or photos and measurements for us to build one from.
• The product data. The facts on the markers are taken from the product page.
• The catalogue's sizes, so the model can be checked against them.
• The colour names as the shop sells them.

Questions

What is a 3D product viewer?

It is the part of a product page that shows the product as a 3D model. The shopper turns and zooms the model in the browser, without an app or a plugin.

How large should a 3D model be for a product page?

The models on this page are between 1.1 and 2.9 megabytes each. Their source files were between 8 and 18 megabytes. The difference comes from storing textures as WebP and compressing the geometry with Draco.

Can one 3D model show several colours?

Colours and materials can be stored in one file as variants, and they switch without a download. A different size or shape needs its own file.

Does a 3D viewer work on phones?

It runs in the phone's browser. On phones with AR the same product can also be placed in the room, from a USDZ file on iPhones and a GLB file on Android.

Does a 3D viewer slow the page down?

The viewer on this site downloads a model when the shopper scrolls near it. A model further down the page is not downloaded until then.