Easy Example of Augmented Reality AR Models in a Website

Image of Stephen Garside Stephen Garside | Sat 21 Dec 19 > 2 min read


Adding An AR 3d Model Viewer To a Web Page

Embedding an Augmented Reality (AR) 3d model to a web page on your website has never been easier thanks to the google model-viewer javascript plugin. Follow these two simple steps to add an augmented reality AR model to a website page:

1. Include these two model-viewer javascript library scripts in your html page.

<script type="module" src="@Html.Raw("https://unpkg.com/@google/model-viewer/dist/model-viewer.js")"></script>
<script nomodule src="@Html.Raw("https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js")"></script>

2. Add an AR model-viewer html element to your web page, with a link to the source of the 3d model you want to view in augmented reality.

<model-viewer style="width:100%;height:100%;" ar="" unstable-webxr="" ios-src="/models/gltf/astronaut.usdz" src="/models/gltf/astronaut.glb" alt="A 3D model of an Astronaut" auto-rotate="" camera-controls="" background-color="#455A64"></model-viewer>


How to Start the AR Experience

Visit the web page with the embedded AR 3d model and simply tap the model. Next, select the option to 'view in your space' and follow the simple instructions to scan your space, and voila! your mode will appear in augmented reality.


What Devices Support Augmented Reality?

The AR model viewer will work on most modern Android and IOS devices, plus it displays as a 3d model viewer on desktop pc's where augmented reality is not possible.

The ability to easily view AR models on a website page opens up a wealth of opportunity for business, especially in the area of eCommerce.  Imagine potential customers browsing your product range, selecting a particular item and viewing a scaled, full size model of it in their personal space - very powerful!


Further Reading and Sample AR Models

A great source of information about how to customise and configure the Augmented Reality model-viewer can be found at https://modelviewer.dev/

Sample augmented reality models to try https://github.com/KhronosGroup/glTF-Sample-Models


Augmented Reality on IOS Devices

The Android AR viewer supports json based .gltf and .glb model formats. For IOS you will need to convert your model to the .usdz format for the IOS Augmented Reality viewer to work correctly.


Model MIME Types

The last thing you may need to do to ensure your AR Models can be downloaded is enable the model MIME types on your web server / host provider.  The relevant MIME types are as follows:

.gltf > 'model/gltf+json'
.glb > 'model/gltf-binary'
.usdz> 'model/usdz-binary'
Augmented Reality Model On A Web Page

Leave Your Comments...