The `<model-viewer>` web component can be used to view and interact with 3D models on the web, and it seamlessly transitions to placing and interacting with those 3D models in Augmented Reality on the web.
<iframe src="https://developers.devsite.google/frame/ar/develop/webxr/model-viewer_8d4e510b99b88438b73ba9a7f2681bd00876e6d84e2a2cf4cf8c38656437d5d9.frame" class="framebox inherit-locale " allow="clipboard-write https://developers.devsite.google" allowfullscreen is-upgraded></iframe>

When viewed on an ARCore-supported Android device, a `<model-viewer>` component
with the `ar` attribute displays a button as shown in the following example:

Tapping this button on ARCore-supported devices will display the model using Chrome's WebXR functionality or
[the Scene Viewer app](https://developers.google.com/ar/develop/java/scene-viewer), depending on the value of
the [`ar-modes`](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arModes)
attribute.

The appearance of the AR button can be customized by using web component slots.
Refer to the [`<model-viewer> documentation`](https://modelviewer.dev/examples/augmentedreality/#customButton) for an example. See also, [Scene Viewer](https://developers.google.com/ar/develop/scene-viewer) for more
about displaying interactive 3D models in AR from an Android app or browser.

## Getting started with `<model-viewer>`

The following steps show how to get started with `<model-viewer>` on any webpage.

### Add the `<model-viewer>` dependency

### From unpkg CDN

    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

### From npm

    npm install @google/model-viewer

Then, add `<model-viewer>` at `node_modules/model-viewer/dist/model-viewer.min.js` using your preferred bundler,

### Include the `<model-viewer>` tag

Add the `<model-viewer>` web component to your HTML document:

    <model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
                  ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
                  alt="A 3D model of an astronaut"
                  ar
                  auto-rotate
                  camera-controls></model-viewer>

### Configure the `<model-viewer>` tag

The model display can be configured by changing the attributes on the `<model-viewer>` tag.
These properties expose options such as camera movement, model animations, and environment information.
The [`<model-viewer>` documentation](https://modelviewer.dev/docs/) lists all attributes that can be set.
The [Model Editor](https://modelviewer.dev/editor/) utility can generate a `<model-viewer>` HTML tag and configure properties such as camera position and lighting.

## Model compatibility

Models in the [`gltf` and `glb` file format](https://www.khronos.org/gltf/) are supported by `<model-viewer>`.
Refer to the [`three.js GLTFLoader documentation`](https://threejs.org/docs/#examples/en/loaders/GLTFLoader) for a list of
supported glTF extensions.

To ensure that your model will display properly, check your model in [Model Editor](https://modelviewer.dev/editor/).

## Browser and device support

Using `<model-viewer>` to display 3D models in a web page is supported in all evergreen browsers.
We recommend using [a `:focus-visible` polyfill](https://modelviewer.dev/#section-browser-support) to hide focus rings when the element is focused.

AR features require an [ARCore-supported device](https://developers.google.com/ar/devices) and an installation of [Google Play Services for AR](https://play.google.com/store/apps/details?id=com.google.ar.core). For the `webxr` [AR mode](https://modelviewer.dev/docs/#entrydocs-augmentedreality-attributes-arModes), refer to [WebXR browser support](https://caniuse.com/webxr).
By default, if WebXR is not supported, [Scene Viewer](https://developers.google.com/ar/develop/java/scene-viewer#scene_viewer_runtime_requirements) will be used instead.

## Next steps

- Review the [`<model-viewer>` reference documentation](https://modelviewer.dev/docs/index.html)
- Check out [`<model-viewer>` samples on modelviewer.dev](https://modelviewer.dev/examples/)
- See also, [Scene Viewer](https://developers.google.com/ar/develop/scene-viewer) for more about displaying interactive 3D models in AR from an Android app or browser.