-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (92 loc) · 4.12 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="layout.css">
<title>WebAR Test</title>
<style>
#error {
background-color: #ffffffdd;
border-radius: 16px;
padding: 16px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition: opacity 0.3s;
}
#error.hide {
opacity: 0;
visibility: hidden;
transition: visibility 2s, opacity 1s 1s
}
model-viewer#reveal {
--poster-color: transparent;
--progress-mask: transparent;
}
</style>
<script>
document.querySelector("#model-viewer").addEventListener('ar-status', (event) => {
if(event.detail.status === 'failed'){
const error = document.querySelector("#error");
error.classList.remove('hide');
error.addEventListener('transitionend',(event) => {
error.classList.add('hide');
});
}
});
</script>
</head>
<body>
<div class="container">
<h1 class="col" style="padding: 3% ;">WebAR Test Page</h1>
<div class="row">
<div class="col">
<h4 style="padding-left: 3%;">Larina 3D Model</h4>
<p style="padding-left: 3%;">
Information about Larina 3D Model. <br>
</p>
<model-viewer id="reveal"
style="width: 75%; height: 500px; align-self: auto;"
ar-scale="fixed"
ar camera-controls
disable-zoom
autoplay
src="assets/larina.glb"
ios-src="assets/larina.usdz"
alt="A 3D model of a Larina">
<div id="error"
class="hide">
AR is not supported on this device
</div>
<!--<button slot="ar-button"
class="primary-button"
style="background-color: azure;
border-radius: 4px;
border: none;
position: absolute;
bottom: 64px;
font-size: 24px">
👋 Activate AR
</button>-->
</model-viewer>
</div>
</div>
</div>
<footer class="col" style="padding: 2%;">WebAR Test Application. 2021</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>