-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (98 loc) · 3.59 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>8th Wall Web: Tap to place</title>
<!-- We've included a slightly modified version of A-Frame, which fixes some polish concerns -->
<script src="//cdn.8thwall.com/web/aframe/8frame-0.8.2.min.js"></script>
<script src="aframe-particle-system-component.js"></script>
<script src="rocket.js"></script>
<script src="photo-mode.js"></script>
<!-- XR Extras - provides utilities like load screen, almost there, and error handling.
See github.com/8thwall/web/xrextras -->
<script defer src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>
<script
defer
src="//cdn.8thwall.com/web/aframe/aframe-animation-component-5.1.2.min.js"
></script>
<!-- 8thWall Web - Replace the app key here with your own app key -->
<script
async
src="//apps.8thwall.com/xrweb?appKey=nH5G0YwR160wpl2MyAZU0RDuLheeAGRBdt2mwsUgwCutnhjcnxjKfZASRBrI2c4AcJQXXV"
></script>
<script src="toggle.js"></script>
<script src="tap-place.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- These HTML elements are used to show an UI laid over the scene -->
<div id="photoModeContainer" style="display: none">
<img id="photoModeImage" />
<div id="flash"></div>
<div id="shutterButton"></div>
<div id="closeButton"></div>
</div>
<div id="toggleBtn" onclick="toggle()">
<p style="text-align: center;"><b>Shuffle</b></p>
</div>
<div id="launchBtn">
<p style="text-align: center;"><b>Implode</b></p>
</div>
<!-- We must add the tap-place component to the scene so it has an effect -->
<a-scene
xrweb
tap-place
xrextras-almost-there
xrextras-loading
xrextras-runtime-error
photo-mode
launch-btn
>
<!-- We can define assets here to be loaded when A-Frame initializes -->
<a-assets>
<!-- Credit to Poly by Google for the model: https://poly.google.com/view/6pwiq7hSrHr -->
<a-asset-item id="treeModel" src="tree.glb"></a-asset-item>
<a-asset-item id="unicornModel" src="unicorn.glb"></a-asset-item>
<a-asset-item id="tomatoModel" src="tomato.glb"></a-asset-item>
<a-asset-item
id="flyingSaucerModel"
src="flying-saucer.glb"
></a-asset-item>
<a-asset-item
id="rocketModel"
src="https://cdn.glitch.com/3c316d74-e496-4344-9ba2-67a411cb8f72%2Frocket.glb"
></a-asset-item>
<a-asset-item id="treebellModel" src="TreeBell.glb"></a-asset-item>
<a-asset-item id="lilyPadModel" src="LilyPad.glb"></a-asset-item>
<a-asset-item id="shrekModel" src="shrek.glb"></a-asset-item>
<a-asset-item id="roseModel" src="rose.glb"></a-asset-item>
</a-assets>
<!-- The raycaster will emit mouse events on scene objects specified with the cantap class -->
<a-camera
position="0 8 0"
raycaster="objects: .cantap"
cursor="
fuse: false;
rayOrigin: mouse;"
>
</a-camera>
<a-entity
light="type: directional;
intensity: 0.8;"
position="1 4.3 2.5"
>
</a-entity>
<a-light type="ambient" intensity="1"></a-light>
<!-- Adding the cantap class allows the ground to be clicked -->
<a-entity
id="ground"
class="cantap"
geometry="primitive: box"
material="color: #ffffff; transparent: true; opacity: 0.0"
scale="1000 2 1000"
position="0 -1 0"
>
</a-entity>
</a-scene>
</body>
</html>