Explore AR with <model-viewer> on your mobile phone

Today you can view any 3D model in AR from your search results. This feature was introduced at Google I/O and will let you add AR support with <model-viewer> in a few lines of code.

<model-viewer> is a relatively new web component introduced in February 2019, but the support for AR just came out in May.

This short tutorial will demonstrate how you can add AR to your product in just few steps:

1. Include dependencies to support all browsers

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

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

2. Add <model-viewer> and now you can view any 3D model on your web-page.

<model-viewer src=”assets/RocketShip_1393.gltf” 
              alt=”A 3D model of a rocket”>
</model-viewer>

3. To add ARCore’s scene viewer, just type in ar attribute :

<model-viewer src=”assets/RocketShip_1393.gltf” 
              ar
              alt=”A 3D model of a rocket”>
</model-viewer>

Now you should be able to see “View in your space” button

And that is it! Now you have AR support for your 3D model.

Final result

There are many other option you might need for further development, here are just a few:

auto-rotate : enables the rotation of the model

camera-controls: enables a user to control the model by touch or click

shadow-intensity: opacity of the shadow [0..1]. The default value is set to 0.

ios-src: specify location of .USDZ model. This will preview of the model via AR Quick Look for iOS 12+ devices

autoplay: starts either a first animation or a specified animation in the model

animation-name: selects the animation by name

Check out this resource for more information on <model-viewer>

Demo here:

https://kristina-simakova.github.io/ar-webview/

Source code can be found here:

Kristina-Simakova/ar-webview

“Rocket ship” 3D model was found on Poly

Check out the next post about Scene Viewer:

Interactive AR with Scene Viewer and Android Intent