/
index.html
68 lines (52 loc) · 1.98 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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>8th Wall Web: Flyer</title>
<script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script>
<!-- XR Extras - provides utilities like load screen, almost there, and error handling.
See github.com/8thwall/web/xrextras -->
<script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>
<!-- 8thWall Web - Replace the app key here with your own app key -->
<script src="//apps.8thwall.com/xrweb?appKey=XXXXXXXXX"></script>
</head>
<body>
<a-scene
xrweb="disableWorldTracking: true"
xrextras-gesture-detector
xrextras-almost-there
xrextras-loading
xrextras-runtime-error>
<a-assets>
<!-- Credit to Poly by Google for the model: https://poly.google.com/view/dA5osnS0Rzj -->
<a-asset-item id="jelly-glb" src="jellyfish-model.glb"></a-asset-item>
<img id="jelly-thumb" src="targets/video-target.jpg">
<video
id="jelly-video"
autoplay
muted
crossorigin="anonymous"
loop="true"
src="jellyfish-video.mp4">
</video>
</a-assets>
<a-camera
position="0 4 10"
raycaster="objects: .cantap"
cursor="fuse: false; rayOrigin: mouse;">
</a-camera>
<a-light type="directional" intensity="0.5" position="1 1 1"></a-light>
<a-light type="ambient" intensity="1"></a-light>
<a-entity
xrextras-named-image-target="name: video-target"
xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
geometry="primitive: plane; height: 1; width: 0.79;">
</a-entity>
<a-entity xrextras-named-image-target="name: model-target">
<!-- Add a child entity that can be rotated independently of the image target. -->
<a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
</a-entity>
</a-scene>
</body>
</html>