-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
101 lines (94 loc) · 5.2 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360 Video Gallery</title>
<meta name="description" content="360 Video Gallery">
<script src="libs/aframe-v0.5.0.js"></script>
<script src="components/[email protected]"></script>
<script src="components/[email protected]"></script>
<script src="components/[email protected]"></script>
<script src="components/[email protected]"></script>
<script src="components/set-video.js"></script>
<script src="components/aframe-video-controls.js"></script>
<script src="components/home-page.js"></script>
<script src="components/aframe-gamepad-controls.js"></script>
<script src="components/aframe-gesture-controls.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" src="" autoplay loop crossorigin="anonymous" controls></video>
<img id="sky-image" crossorigin="anonymous" src="imgs/sky1.jpg">
<img id="l1c1-thumb" crossorigin="anonymous" src="imgs/l1c1.jpg">
<img id="l1c2-thumb" crossorigin="anonymous" src="imgs/l1c2.jpg">
<img id="l1c3-thumb" crossorigin="anonymous" src="imgs/l1c3.jpg">
<img id="l1c4-thumb" crossorigin="anonymous" src="imgs/l1c4.jpg">
<img id="l2c1-thumb" crossorigin="anonymous" src="imgs/l2c1.jpg">
<img id="l2c2-thumb" crossorigin="anonymous" src="imgs/l2c2.jpg">
<img id="l2c3-thumb" crossorigin="anonymous" src="imgs/l2c3.jpg">
<img id="l2c4-thumb" crossorigin="anonymous" src="imgs/l2c4.jpg">
<img id="l3c1-thumb" crossorigin="anonymous" src="imgs/l3c1.jpg">
<img id="l3c2-thumb" crossorigin="anonymous" src="imgs/l3c2.jpg">
<img id="l3c3-thumb" crossorigin="anonymous" src="imgs/l3c3.jpg">
<img id="l3c4-thumb" crossorigin="anonymous" src="imgs/l3c4.jpg">
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="clickable"
geometry="primitive: plane; height: 1; width: 2"
material="shader: flat; src: ${thumb}"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1"
set-video="on: click; target: #video-360; src: ${src}"></a-entity>
</script>
</a-assets>
<a-videosphere id="video-360" src="#video" rotation="0 180 0"></a-videosphere>
<a-entity id="controls" video-controls="src:#video"></a-entity>
<a-sky id="sky" visible="true" src="#sky-image"></a-sky>
<a-entity id="home-page" home-page>
<a-entity id="line1" layout="type: line; margin: 2.4" position="-3.5 2 -5">
<a-entity template="src: #link" data-src="videos/l1c1.mp4" data-thumb="#l1c1-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l1c2.mp4" data-thumb="#l1c2-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l1c3.mp4" data-thumb="#l1c3-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l1c4.mp4" data-thumb="#l1c4-thumb"></a-entity>
</a-entity>
<a-entity id="line2" layout="type: line; margin: 2.4" position="-3.5 0.8 -5">
<a-entity template="src: #link" data-src="videos/l2c1.mp4" data-thumb="#l2c1-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l2c2.mp4" data-thumb="#l2c2-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l2c3.mp4" data-thumb="#l2c3-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l2c4.mp4" data-thumb="#l2c4-thumb"></a-entity>
</a-entity>
<a-entity id="line3" layout="type: line; margin: 2.4" position="-3.5 -0.4 -5">
<a-entity template="src: #link" data-src="videos/l3c1.mp4" data-thumb="#l3c1-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l3c2.mp4" data-thumb="#l3c2-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l3c3.mp4" data-thumb="#l3c3-thumb"></a-entity>
<a-entity template="src: #link" data-src="videos/l3c4.mp4" data-thumb="#l3c4-thumb"></a-entity>
</a-entity>
</a-entity>
<!-- Camera + cursor. -->
<a-entity camera look-controls>
<a-cursor gamepad-controls gesture id="cursor"
color="yellow"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: springgreen"
event-set__2="_event: mouseleave; color: yellow"
raycaster="objects: .clickable">
</a-cursor>
</a-entity>
</a-scene>
<script>
var scene = document.querySelector('a-scene');
function checkAndEnterVR() {
if (!scene.hasLoaded || !scene.effect || scene.effect.getVRDisplay() === undefined) {
setTimeout(checkAndEnterVR, 500);
} else {
scene.enterVR();
}
}
setTimeout(checkAndEnterVR, 500);
</script>
</body>
</html>