Now that you have both your .USDZ (iOS) and .GLB (Android) files, we can platform your Augmented Reality animation onto a webpage for your audience to launch it from. Simply copy the code below:

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

<div>
<model-viewer 
  alt="ALT TEXT HERE" 
  src="ANDROID GLB HERE" 
  ios-src="IOS USDZ HERE" 
  skybox-image="HDRI HERE"
  camera-controls="true" 
  ar="true"
  autoplay="true"
  style="width: 100%; height: 500px"
  max-camera-orbit="auto auto 5m"
  camera-orbit="auto auto 3m"
>
</div>

This makes use of Google’s model-viewer to platform our Augmented Reality animation. This also means that you only need to upload your .USDZ, .GLB and HDRI map, with no extra installing of software or packages needed, making this an economic solution for all kinds of content management systems. Simply replace the following:

“ALT TEXT HERE” with an alternate text that appears when a computer user hovers over the AR platform.

“ANDROID GLB HERE” and “IOS USDZ HERE” with your respective final Android and iOS exports. Do note that these will have to be direct links, for example: “http://yourwebsitehere.com/uploads/thefinalexports.usdz”

“HDRI HERE” with a .HDR of your choice. You can find free to download skyboxes here: https://hdrihaven.com/hdris/ Do note that this will only affect the preview on the webpage, and will not affect that lighting nor background of the actual Augmented Reality experience once the user launches it.

Once that is done, feel free to add any additional contents or instructions for your audience, and publish the webpage. The finished platform should look something like this:

wpChatIcon