Adding 3D models to a website can be tricky; \<model-viewer\> is as easy as writing HTML.


![Joe Medley](https://web.dev/images/authors/joemedley.jpg) Joe Medley [GitHub](https://github.com/jpmedley)

<br />

> [!CAUTION]
> **Caution:** One or more demos on this page no longer work, as [Glitch has ended hosting](https://blog.glitch.com/post/changes-are-coming-to-glitch).

Adding 3D models to a website is tricky. 3D models are ideally shown in
a viewer that can work responsively on all browsers including smartphones,
desktop, or even new head-mounted displays. The viewer should support
progressive enhancement for performance and rendering quality. It should support
use cases on all devices ranging from older, lower-powered smartphones to newer
devices that support augmented reality. It should stay up to date with current
technologies. It should be performant and accessible. However, building such a
viewer requires specialty 3D programming skills, and can be a challenge for web
developers that want to host their own models instead of using a third-party
hosting service.

The [`<model-viewer>`](https://modelviewer.dev/) web component, however,
lets you declaratively add a 3D model
to a web page, while hosting the model on your own site.
The goal of the component is to enable adding 3D models to your
website without understanding the underlying technology and platforms.
The web component supports responsive design,
and use cases like augmented reality on some devices.
It includes features for accessibility, rendering quality, and
interactivity.

> [!NOTE]
> **Note:** You can view recent [updates to `<model-viewer>` on GitHub](https://github.com/google/model-viewer/releases).

## What is a web component?

A web component is a custom HTML element built from standard web platform
features. A web component behaves for all intents and purposes like a standard
element. It has a unique tag, it can have properties and methods, and it can
fire and respond to events. In short, you don't need to know anything special to
use any web component, much less `<model-viewer>`.

This article covers features that are particular to `<model-viewer>`.
If you're interested in learning more about web components,
[webcomponents.org](https://www.webcomponents.org/) is a good place to start.

## What can `<model-viewer>` do?

The following examples demonstrate some capabilities of `<model-viewer>`.

> [!NOTE]
> **Note:** Read [Interactive 3D on the web with Google hardware: Next-gen product education experiences](https://web.dev/case-studies/3d-on-the-web) to learn how Google used `<model-viewer>` to create an interactive experience for products such as the Pixel Fold.

### Basic 3D models

Embedding a 3D model is as simple as the following markup. By
[using glb files](https://www.marxentlabs.com/glb-files/),
this component will work on any major
browser.

    <!-- Import the component -->
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
    <!-- Use it like any other HTML element -->
    <model-viewer
      id="mv-shark"
       src="shark.glb"
      camera-controls
    ></model-viewer>

That code renders like this:
<iframe src="https://model-viewer-shark.glitch.me/" title="<model-viewer> on Glitch" allow="geolocation; microphone; camera; midi; vr; encrypted-media;
clipboard; clipboard-read; clipboard-write" style="height: 100%; width: 100%; border: 0;"> </iframe>

### Add motion and interactivity

The `auto-rotate` and `camera-controls` attributes provide motion and user
control. Those aren't the only possible attributes. See the documentation for [a
complete list of attributes](https://modelviewer.dev/#section-attributes).

    <model-viewer src="shark.glb" auto-rotate camera-controls>

### Delay loading with poster images

All 3D models take time to load, adding a `poster` attribute
means that an image will be shown until the model is ready to use.
A poster image that will look identical to the 3D render
can be generated using the [editor](https://modelviewer.dev/editor/).

    <model-viewer src="shark.glb" controls auto-rotate
    poster="shark.jpg">

### Responsive design

The component handles some types of
[responsive design](https://web.dev/articles/responsive-web-design-basics), scaling for both mobile
and desktop. It can also manage multiple instances on a page and uses
[Intersection
Observer](https://developer.mozilla.org/docs/Web/API/IntersectionObserver)
to conserve battery power and GPU cycles when a model isn't visible.

Using the editor described previously to create a poster image allows that
single image to match the 3D render, even as the aspect ratio of `<model-viewer>`
responds to different screen sizes.
![Multiple spacesuit images representing responsiveness.](https://web.dev/static/articles/model-viewer/image/multiple-spacesuit-images-a66cc001f1b1d.png) Multiple spacesuit images representing responsiveness.

### More features

Explore the [`<model-viewer>` documentation](https://modelviewer.dev/)
for demos of more advanced features.
These include the ability to add a
[ground-projected skybox](https://modelviewer.dev/examples/lightingandenv/#groundedSkybox),
and create
[animated textures](https://modelviewer.dev/examples/scenegraph/#animatedTexturesExample),
and [hotspots](https://modelviewer.dev/examples/annotations/index.html#animatedHotspots).