In February, we introduced the
which lets you declaratively add a 3D model to a web page, while hosting the
model on your own site. One thing it didn't support was augmented reality. That
is, you could not render the component's source image on top of a device's
To do that, we've since added support for Magic Leap, and Quick Look on iOS. Now
we're announcing support for AR on Android with the addition of the
attribute. This attribute is built on a new ARCore feature called Scene Viewer,
an external app for viewing 3D models. To learn more about Scene Viewer,
check out Viewing 3D models in AR from an Android browser.
Let's see how to do augmented reality with
A web component, as you may recall, requires no special knowledge to use. It
behaves like a standard HTML element, having a unique tag as well as properties
and methods. After
installing it with a
use it like any other HTML element.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
This looks much the same as what I had in my earlier article. Notice the thing I've highlighted at the very end. That's the new attribute.
Installing the new version
If you're using
<model-viewer> already, you're probably importing the component
<script> tags exactly
as shown in the documentation.
We're continually making improvements. If you want to test new features before
deliberately upgrading and deploying, you'll want to install a specific version
<model-viewer>. To do this, add the version number to the file URLs as shown
below. Then, watch
the releases page
<script type="module" src="https://unpkg.com/@firstname.lastname@example.org/dist/model-viewer.js"> </script> <script nomodule src="https://unpkg.com/@email@example.com/dist/model-viewer-legacy.js"> </script>
Give the new version of
<model-viewer> a try and let us know what you think.
Issues and feedback are
welcome on GitHub.