-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrelax.html
83 lines (76 loc) · 3.24 KB
/
relax.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
<title>Aletsch 2018</title>
<meta name="description" content="Swiss glacier visualised in 3D with A-Frame">
<style type="text/css">
#framely { z-index:100; width:100%; height:100%; position:fixed; }
#loading { z-index:200; width:100%; height:100%; position:fixed;
background:#ecf4f7; color:#333;
font:bold italic 26pt serif; text-align:center; padding-top:15%; }
.sources a { font:normal 14pt sans-serif; text-decoration:none; color:blue; }
.sources img { height:2em; }
#loading div { margin-top:4em; }
</style>
<script src="lib/zepto/zepto.min.js"></script>
<script src="lib/zepto/zepto-fx.js"></script>
<script src="lib/csv/asyncCsv2Array.js"></script>
<script src="data/haiku.js"></script>
<script src="lib/aletsch/index.js"></script>
<script src="lib/aframe/aframe-master.min.js"></script>
<script src="lib/terrain/aframe-terrain-model-component.min.js"></script>
<script src="lib/curve/aframe-curve-component.min.js"></script>
<script src="lib/alongpath/aframe-alongpath-component.min.js"></script>
<script src="lib/particle/aframe-particle-system-component.min.js"></script>
</head>
<body>
<div id="loading">
<span></span>
<div class="sources">
<p><small><em>Too quaint? Try the</em>
<br>.: <a href="index.html"><b>Full</b> edition</a> :.</small>
</p>
<a href="https://github.com/loleg/aletsch-rutsch"><em>Relax</em>, it's <b>open</b></a>
</div>
</div>
<a-scene
background="color: #ecf4f7">
<!-- Fog does not work, conflicts with particle shader component
see: https://github.com/IdeaSpaceVR/aframe-particle-system-component/issues/26
fog="type: linear; color: #ecf4f7; far: 100">-->
<a-entity position="-25 25 17" particle-system="preset: snow; particleCount: 5000"></a-entity>
<a-entity id="g-terrain" terrain-model='zPosition: 80;
wireframe: true;
texture: url(geodata/aletschgletsch-DHM-g.jpg);
DEM: url(geodata/aletschgletsch-300.bin);
planeWidth: 46;
planeHeight: 46;
segmentsWidth: 299;
segmentsHeight: 299' scale="6 6 6">
</a-entity>
<a-curve id="camera-track">
<a-curve-point position="-40 155.6 -21"></a-curve-point>
<a-curve-point position="-40 55.6 -21"></a-curve-point>
<a-curve-point position="-40 26.6 -21"></a-curve-point>
<a-curve-point position="-31 25 -12"></a-curve-point>
<a-curve-point position="-40 21 6.1"></a-curve-point>
<a-curve-point position="-25 20 17"></a-curve-point>
<a-curve-point position="-12 20 37"></a-curve-point>
<a-curve-point position="-17 30 45"></a-curve-point>
<a-curve-point position="-19 33 50"></a-curve-point>
<a-curve-point position="-20 35 55"></a-curve-point>
</a-curve>
<!-- position="-20 35 55"-->
<a-entity camera id="g-camera"
position="-43 26 -23"
alongpath="curve: #camera-track; dur: 30000"
universal-controls wasd-controls look-controls
rotation="-2 225 0"
></a-entity>
</a-scene>
</body>
</html>