<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:
The appearance of the AR button can be customized by using web component slots.
Refer to the
<model-viewer> documentation for an example.
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.
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.