forked from ngokevin/360-image-gallery-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
98 lines (80 loc) · 4.73 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PROXIMA</title>
<meta name="description" content="PROXIMA">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://npmcdn.com/aframe-animation-component"></script>
<script src="https://npmcdn.com/aframe-event-set-component"></script>
<script src="https://npmcdn.com/aframe-layout-component"></script>
<script src="https://npmcdn.com/aframe-template-component@3.1.1"></script>
<script src="components/change-time.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<audio id="click-sound" crossorigin="anonymous"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="earlier" crossorigin="anonymous" src="assets/earlier.png">
<img id="later" crossorigin="anonymous" src="assets/later.png">
<img id="sky-0000" crossorigin="anonymous" src="assets/sky-0000.jpg">
<img id="sky-0615" crossorigin="anonymous" src="assets/sky-0615.jpg">
<img id="sky-1230" crossorigin="anonymous" src="assets/sky-1230.jpg">
<img id="sky-1845" crossorigin="anonymous" src="assets/sky-1845.jpg">
<img id="dashboard1" crossorigin="anonymous" src="assets/dash-0000.jpg">
<img id="dashboard2" crossorigin="anonymous" src="assets/dash-0615.jpg">
<img id="dashboard3" crossorigin="anonymous" src="assets/dash-1230.jpg">
<img id="dashboard4" crossorigin="anonymous" src="assets/dash-1845.jpg">
<a-asset-item id="hab-obj" src="assets/3d/HDU_lowRez_part1.obj"></a-asset-item>
<a-asset-item id="hab-mtl" src="assets/3d/HDU_lowRez_part1.mtl"></a-asset-item>
<script id="text" type="text/html">
<a-text class="link"
value="${text}"
align="center"
geometry="primitive: plane; height: 0.25; width: 1.25"
material="color: black; opacity: 0.25"
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"
change-time="on: click; time: ${time}; brightness: ${brightness}; dashboard: ${dashboard}; target: #image-360"
sound="on: click; src: #click-sound"></a-text>
</script>
</a-assets>
<a-sky id="image-360" radius="15" src="#sky-1230"></a-sky>
<a-text id="time" value="12:30\nSOL 24" align="center" position="2 2 -4"></a-text>
<!--<a-entity id="sun" geometry="primitive: sphere; radius: 3" material="color: white" position="3 6 -2"></a-entity>-->
<a-entity id="test" geometry="primitive: cylinder; radius: 0.3; height: 0.5"
material="color: white; wireframe: true"
position="1.5 0.1 -2.5">
<a-entity id="water" geometry="primitive: cylinder; radius: 0.3; height: 0.135" material="color: blue" position="0 -0.175 0">
</a-entity>
</a-entity>
<a-entity id="dashboard" geometry="primitive: plane; height: 2; width: 3" material="shader: flat; src: #dashboard1"
position="0 1 -4"></a-entity>
<a-entity id="links" layout="type: line; margin: 1.25" position="-2 -1 -4">
<a-entity template="src: #text" data-text="0:00" data-time="0:00" data-brightness="0"
data-dashboard="#dashboard1"></a-entity>
<a-entity template="src: #text" data-text="6:15" data-time="6:15" data-brightness="20"
data-dashboard="#dashboard2"></a-entity>
<a-entity template="src: #text" data-text="12:30" data-time="12:30" data-brightness="40"
data-dashboard="#dashboard3"></a-entity>
<a-entity template="src: #text" data-text="18:45" data-time="18:45" data-brightness="60"
data-dashboard="#dashboard4"></a-entity>
</a-entity>
<a-entity obj-model="obj: #hab-obj; mtl: #hab-mtl" scale="0.005 0.005 0.005" position="-5 -1 -10"></a-entity>
<a-entity camera look-controls>
<a-cursor id="cursor"
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: black"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
<a-light type="ambient" color="#445451"></a-light>
<a-light id="point-light" type="point" intensity="2" position="0 10 0"></a-light>
</a-scene>
</body>
</html>