How to add a 3D model to a website the file, the viewer and the page

GLB is the single-file form of glTF, an open format for 3D models made for the web. A GLB file contains the mesh, which is the shape, the materials, which say how each surface responds to light, and the textures, which are the images wrapped onto the surfaces. Browsers on phones and computers can display it without a plug-in.

Other 3D formats exist for other purposes. CAD formats are for manufacturing. The files a rendering studio works in are for making images and films. Neither is meant to be sent to a visitor's phone. For a website, the model is exported or rebuilt as GLB.

A viewer is the code that loads the GLB and draws it. The one we use is model-viewer, an open-source web component. A developer adds its script to the page once, then writes a single tag where the model should appear. The tag names the GLB file, the poster image and a few settings: whether the model turns by itself, how far the visitor can zoom, and how it is lit.

That is how to add a 3D model to a website in HTML. No 3D programming is needed, and a developer who can edit a page template can do it. The same tag can later carry an AR button, so the product can be viewed in a room from a phone.

A heavy model is the usual reason a 3D view fails. The visitor sees an empty box, waits and scrolls on.

The skill is in reducing the size without the product looking worse. Detail is kept where the eye goes, such as stitching, edges and logos, and removed where it does not show. A model taken from CAD or from a rendering scene nearly always has to be rebuilt this way. These are the things that decide the size.

• Polygons, the small flat faces that make up the shape: use fewer, placed where the curves need them
• Draco compression: a method that shrinks the shape data inside a GLB
• Textures, the images on the surfaces: smaller dimensions and efficient image formats
• Materials: fewer separate materials means fewer sets of textures to download
• Hidden parts: remove anything the visitor can never see

A poster is a still picture of the product, taken from the angle the model starts at. It shows as soon as the page opens. When the model has loaded, it takes the poster's place, and because the angle matches, the change is hardly noticed.

Set the viewer to load the model only when it scrolls into view, or when the visitor taps. A page with many products should not download every model at once. On a slow connection the visitor still sees the poster, which is an ordinary product image.

Put the 3D view where a buyer already looks for detail. On a product page that is the image gallery, as one of the slides, or a panel beside the specifications. Give it enough room. A model shown in a small box is harder to use than a photograph.

Tell the visitor it can be turned. A short label or a hand icon is enough, since many people will otherwise take it for a still image. On a phone, check that a finger drag on the model turns it and a drag outside it still scrolls the page. Keep ordinary photos on the page as well. Search engines, social previews and visitors on older devices rely on them.

Store platforms and marketplaces handle 3D differently. Some accept a 3D file among the product images. Some need an app or a change to the theme. Marketplaces publish their own technical requirements for the file type, the file size and how the model is built, and they revise them.

We do not list those requirements here, because they change. Read the platform's current help pages, or ask your developer, and send us the requirements with the brief. We build the model to them. See AR-ready 3D models.

If the viewer is in place and the result still looks poor, the cause is nearly always the model. Common faults are a product that looks flat because the materials were not set up for real-time display, colours that do not match the real product, visible flat faces on curves, and a file too heavy to load.

A model made for the web is built for that purpose from the start: to real dimensions, with clean geometry, with materials checked in the viewer under neutral light, and tested on a phone. That is what our 3D models for websites service delivers. For models of a whole product range, see 3D product modelling.