Skip to content

Instantly share code, notes, and snippets.

@FellowshipAgency

FellowshipAgency/AR quicklook.htm

Created January 17, 2019 14:42
Show Gist options
  • Save FellowshipAgency/23adf347c207d2094604dfca093dbc72 to your computer and use it in GitHub Desktop.
Save FellowshipAgency/23adf347c207d2094604dfca093dbc72 to your computer and use it in GitHub Desktop.
Download ZIP
AR quicklook
Raw
AR quicklook.htm
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>AR Quick Look Example</title>
<script>
/* from Apple's AR Quick Look Gallery */
(function () {
var isRelAR = false;
var a = document.createElement('a');
if (a.relList.supports('ar')) {
isRelAR = true;
}
document.documentElement.classList.add(isRelAR ? 'relar' : 'no-relar');
})();
</script>
<style>
.relar [data-hide-on-relar] {
display: none;
}
</style>
</head>
<body>
<h1>AR Quick Look Example</h1>
<p data-hide-on-relar>Visit this page on iOS 12 to try AR Quick Look</p>
<a href="https://developer.apple.com/arkit/gallery/models/stratocaster/stratocaster.usdz" rel="ar">
<img src="https://developer.apple.com/arkit/gallery/models/stratocaster/stratocaster.jpg" width="250" height="250">
</a>
<h2>in HTML</h2>
<code>img<code> tag in <code>a<code> tag is required.
<code>
<pre>
&lt;p data-hide-on-relar&gt;Visit this page on iOS 12 to try AR Quick Look&lt;/p&gt; &lt;!-- This message shoud be hidden by JS and CSS --&gt;
&lt;a href="path/to/stratocaster.usdz" rel="ar"&gt;
&lt;img src="path/to/stratocaster.jpg" width="250" height="250"&gt;
&lt;/a&gt;
</pre>
</code>
<h2>in JavaScript (How to detect whether the browser has the AR feature or not.)</h2>
<code>
<pre>
/* 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');
})();
</pre>
</code>
<h2>in CSS (Hide caveats)</h2>
<code>
<pre>
.relar [data-hide-on-relar] {
display: none;
}
</pre>
</code>
<p>More usdz are in <a href="https://developer.apple.com/arkit/gallery/" target="_blank">https://developer.apple.com/arkit/gallery/</a> or <a href="https://www.fusionar.app">https://www.fusionar.app</a>.</p>
<p>More resources are in <a href="https://github.com/vfxpro99/usd-resources">https://github.com/vfxpro99/usd-resources</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment