42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title><model-viewer></title>
|
|
<meta charset="utf-8">
|
|
<meta name="description" content="<model-viewer>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link type="text/css" href="../styles/ux-test.css" rel="stylesheet" />
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"/>
|
|
|
|
|
|
|
|
<script type='module' src='https://modelviewer.dev/node_modules/@google/model-viewer/dist/model-viewer.min.js'></script>
|
|
</head>
|
|
<body>
|
|
<h1>AR in the browser</h1>
|
|
<model-viewer
|
|
src='../assets/ShopifyModels/Chair.glb'
|
|
poster='../assets/ShopifyModels/Chair.png'
|
|
camera-controls
|
|
shadow-intensity='1'
|
|
ar
|
|
ar-modes='webxr'
|
|
touch-action='none'>
|
|
|
|
<button slot="ar-button" id="ar-button">
|
|
View in your space
|
|
</button>
|
|
|
|
<div id="ar-prompt">
|
|
<img src="../assets/hand.png">
|
|
</div>
|
|
|
|
<button id="ar-failure">
|
|
AR is not tracking!
|
|
</button>
|
|
</model-viewer>
|
|
<p>The "View in your Space" button activates AR in the browser with the WebXR API, which is supported on Android, but not yet on iOS.
|
|
Now the rendering is identical in 3D and AR, since model-viewer handles it all. The browser also participates, allowing arbitrary
|
|
HTML to render on top of the AR scene.</p>
|
|
</body>
|
|
</html> |