AR Quick Look Example

Visit this page on iOS 12 to try AR Quick Look
in HTML

img tag in a tag is required.
    
      <p data-hide-on-relar>Visit this page on iOS 12 to try AR Quick Look</p> <!-- This message shoud be hidden by JS and CSS -->
<a href="path/to/stratocaster.usdz" rel="ar">
  <img src="path/to/stratocaster.jpg" width="250" height="250">
</a>
      
    

    in JavaScript (How to detect whether the browser has the AR feature or not.)
    
      /* from Apple's AR Quick Look Gallery */
(function () {
  var isRelAR = false;
  var a = document.createElement('a');
  if (a.relList.supports('ar')) {
    isRelAR = true;
  }
  // to hide caveats by style
  document.documentElement.classList.add(isRelAR ? 'relar' : 'no-relar');
})();
      
    

    in CSS (Hide caveats)
    
      .relar [data-hide-on-relar] {
  display: none;
}
      
    

    More usdz are in https://developer.apple.com/arkit/gallery/ or https://www.fusionar.app.
    More resources are in https://github.com/vfxpro99/usd-resources