-
Notifications
You must be signed in to change notification settings - Fork 0
/
model.html
29 lines (25 loc) · 1.16 KB
/
model.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopzen - AR view</title>
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
<style>
model-viewer#reveal {
--poster-color: transparent;
}
</style>
<!-- use unique asset to ensure lazy loading -->
<!-- Use it like any other HTML element -->
<model-viewer id="reveal" poster="../../models/assets/red_tshirt.png" loading="eager" ar ar-modes="webxr scene-viewer quick-look" ar-scale="fixed" src="https://cdn.glitch.com/241a0a07-f121-4c16-9e06-165e8dfdcd72%2Fscene.gltf?v=1616571044566" alt="A 3D model of an astronaut" auto-rotate camera-controls>
<button slot="ar-button" style="background-color: lightgrey; border-radius: 4px; border: none; position: absolute; top: 16px; right: 16px; ">
👋 Activate AR
</button>
</model-viewer>
</body>
</html>