<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.
When viewed on an ARCore-supported Android device, a
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, depending on the value of
The appearance of the AR button can be customized by using web component slots.
Refer to the
<model-viewer> documentation for an example. See also, Scene Viewer for more
about displaying interactive 3D models in AR from an Android app or browser.
Getting started with
The following steps show how to get started with
<model-viewer> on any webpage.
From unpkg CDN
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
npm install @google/model-viewer
node_modules/model-viewer/dist/model-viewer.min.js using your preferred bundler,
<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>
The model display can be configured by changing the attributes on the
These properties expose options such as camera movement, model animations, and environment information.
<model-viewer> documentation lists all attributes that can be set.
The Model Editor utility can generate a
<model-viewer> HTML tag and configure properties such as camera position and lighting.
Models in the
glb file format are supported by
Refer to the
three.js GLTFLoader documentation for a list of
supported glTF extensions.
To ensure that your model will display properly, check your model in Model Editor.
Browser and device support
<model-viewer> to display 3D models in a web page is supported in all evergreen browsers.
We recommend using a
:focus-visible polyfill to hide focus rings when the element is focused.
AR features require an ARCore-supported device and an installation of Google Play Services for AR. For the
webxr AR mode, refer to WebXR browser support.
By default, if WebXR is not supported, Scene Viewer will be used instead.
- Review the
- Check out
<model-viewer>samples on modelviewer.dev
- See also, Scene Viewer for more about displaying interactive 3D models in AR from an Android app or browser.