Vi3W
LOG INStart free
Skip to content

Guides

How to embed a 3D model on your website with model-viewer

Show an interactive 3D model on any web page with Google's model-viewer: the script tag, the attributes that matter, AR on phones, and file size.

Aman PorwalFounder @ Vi3W

3 min read

A ceramic teapot split down the middle: glazed teal on the left, grey clay with an even quad mesh grid on the right

Quick answer

How do I put a 3D model on a website?

Add Google's model-viewer web component with one script tag, then place a model-viewer element whose src points to a GLB file. Add camera-controls so visitors can rotate it, a poster image for fast loading, and the ar attribute for phones. For custom interaction or a full scene, load the GLB with three.js instead.

Try VI3W Now

Pick the tool for the job

There are two good ways to put a model on a page:

  • model-viewer for "show this object, let people spin it, maybe in AR". It is one HTML element, maintained by Google, and needs no 3D programming.
  • three.js for anything more: several models, custom lighting, animation driven by scrolling, a configurator. It is a full 3D library, and our three.js guide covers loading Vi3W models into it.

Most product pages, portfolios and documentation only need the first.

model-viewer in two lines

model-viewer is a web component, so setting it up takes two steps:

  1. Load the script once, in the page head, from Google's CDN as its README shows. Version 4.4.0 is the current release at the time of writing: <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.4.0/model-viewer.min.js"></script>
  2. Place the element where the model should appear: <model-viewer src="/models/lamp.glb" alt="A brass desk lamp with a hinged arm" camera-controls auto-rotate poster="/models/lamp-poster.webp" ar ios-src="/models/lamp.usdz"></model-viewer>

Give the element a height in your CSS, for example model-viewer { width: 100%; height: 480px; }. Without one, it renders at a small default size.

The attributes that matter

Taken from model-viewer's documentation:

  • src points to the model. Only glTF and GLB are supported, so convert other formats first. See how to open GLB files.
  • alt describes the model for screen readers. Write it like image alt text.
  • camera-controls lets visitors rotate and zoom with mouse or touch.
  • auto-rotate turns the model slowly until someone interacts.
  • poster shows an image while the model loads. Use a real render of the model so the page does not jump when it appears.
  • ar enables augmented reality on supported phones. ar-modes defaults to webxr scene-viewer quick-look, tried in that order.
  • ios-src gives iPhones a USDZ file for AR Quick Look, because iOS does not read GLB in AR. See viewing 3D models on your phone.

Keep it fast

A 3D model is often the heaviest file on the page. A few habits keep it from hurting load times:

  1. Budget the polygons. A product shown at 500 pixels wide does not need a million triangles. A cleanly retopologised model looks the same at a fraction of the size.
  2. Shrink the textures. 2048 pixels square is plenty for most web models, and 1024 is often enough.
  3. Compress. glTF supports mesh compression (Draco, Meshopt) and compressed textures (KTX2). model-viewer and three.js both read them.
  4. Use the poster. The page stays fast for people who never touch the model.

Where the model comes from

The element is the easy part. A clean, light, correctly scaled GLB is the hard part. Vi3W generates models from text, a sketch or a photo, applies automatic retopology to get high-poly geometry down to a web-friendly weight, and exports GLB ready for the src attribute. The product design use case shows how teams use that for product pages.

Try VI3W Now

Last reviewed