-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·158 lines (127 loc) · 6.96 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>AR Quick Look</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>
<!-- Add CSS -->
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<h1>Web AR YAY! :) </h1>
<p data-hide-on-relar>Visit this page on Safari with iOS or Chrome with Android to try AR Quick Look</p>
<!-- ******************* -->
<!-- Need to create these divs dynamically s othat they don't pop up for a split second.. -->
<!-- ******************* -->
<div id="ios_quickLook">
<p>You are in Safari so you must be on an iOS device.</p>
<!-- Hosted Model on Firebase with Direct Download Link -- OR -- store models in the repo -->
<a href="models/SandCastle.usdz" rel="ar"></a>
<!-- <a href="https://firebasestorage.googleapis.com/v0/b/webarstorage.appspot.com/o/reflectionTest.usdz?alt=media&token=fd04f01c-5ef5-44ce-8c06-fcfc5bf271f6.usdz" rel="ar"> -->
<!-- Image from any -->
<img src="<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>AR Quick Look</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>
<!-- Add CSS -->
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<h1>Web AR YAY! :) </h1>
<p data-hide-on-relar>Visit this page on Safari with iOS or Chrome with Android to try AR Quick Look</p>
<!-- ******************* -->
<!-- Need to create these divs dynamically s othat they don't pop up for a split second.. -->
<!-- ******************* -->
<div id="ios_quickLook">
<p>You are in Safari so you must be on an iOS device.</p>
<!-- Hosted Model on Firebase with Direct Download Link -- OR -- store models in the repo -->
<!-- <a href="models/AJC_Face.usdz" rel="ar"></a> -->
<a href="https://firebasestorage.googleapis.com/v0/b/shop-office.appspot.com/o/SandCastle.usdz?alt=media&token=bf94ba90-1809-4a83-a516-875d8d26e871.usdz" rel="ar">
<!-- Image from any -->
<img src="https://hips.hearstapps.com/rbk.h-cdn.co/assets/cm/14/49/547edea5e2c2b_-_sandcastle-building-tips-xlg.jpg" width="250" height="auto">
</a>
<br>
<br>
<a href="https://firebasestorage.googleapis.com/v0/b/webarstorage.appspot.com/o/AmirPlant%2FplantAR2.usdz?alt=media&token=c0d107e7-5321-4165-9cb5-cce79332a88b" rel="ar">
<!-- Image from any -->
<img src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/18/10/philodendron-plant.jpg" width="250" height="auto">
</a>
</div>
<!-- <iframe id="04bea4d5-5c34-4777-8ef1-f2ea4136a2ec" src="https://www.vectary.com/embed/viewer/v1/viewer.html?model=04bea4d5-5c34-4777-8ef1-f2ea4136a2ec" frameborder="0" width="100%" height="480"></iframe> -->
<!-- <div id="android_quickLook">
<p>You in Chrome so you must be on an Android device.</p>
This is all you need for Android
<model-viewer ar src="models/SandCastle.gltf" auto-rotate camera-controls alt="Sand Castle!" background-color="#455A64"></model-viewer>
</div> -->
<!-- Libraries to make the Android quicklook function -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<script src="app.js"></script>
</body>
</html>
</a>
</div>
<div id="android_quickLook">
<p>You in Chrome so you must be on an Android device.</p>
<!-- This is all you need for Android -->
<!-- This is not working to pull model from firebase storage.. find out why usdz works but not gltf.. maybe need different embed? -->
<!-- Not working for model in directory either. Test with other gltf models. -->
<!-- GLTF must have .bin zip file at same location -->
<!-- even with .bin file next to gltf model in firebase storage.. it isn't grabbing the .bin. AR wont work -->
<!-- now not even working in directory.. test new gltf model.. -->
<model-viewer ar src="models/reflectionTest.gltf" auto-rotate camera-controls alt="Sand Castle!" background-color="#455A64"></model-viewer>
<!-- <model-viewer ar src="https://firebasestorage.googleapis.com/v0/b/webarstorage.appspot.com/o/reflectionTest.gltf?alt=media&token=fa0d8ab0-fd65-4012-8c5d-2b900996a55c" auto-rotate camera-controls alt="Sand Castle!" background-color="#455A64"></model-viewer> -->
</div>
<!-- usdz embed straight from Vectary -->
<!-- <iframe width="100%" height="300" frameborder="0"
src="https://www.vectary.com/usdz/embed/5e3b1459-e482-4c0c-b1f2-90e5231bcb85">
</iframe> -->
<!-- <iframe id="5e3b1459-e482-4c0c-b1f2-90e5231bcb85" src="https://www.vectary.com/embed/viewer/v1/viewer.html?model=5e3b1459-e482-4c0c-b1f2-90e5231bcb85&env=default&autoplay=1&turntable=3&showPreloader=1" frameborder="0" width="100%" height="480"></iframe> -->
<!--
<iframe width="100%" height="300" frameborder="0"
src="https://www.vectary.com/usdz/embed/5e3b1459-e482-4c0c-b1f2-90e5231bcb85">
</iframe> -->
<!-- Libraries to make the Android quicklook function -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<script src="app.js"></script>
</body>
</html>