-
Notifications
You must be signed in to change notification settings - Fork 317
/
index.html
48 lines (40 loc) · 1.42 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
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
// Gen random paths
const N_PATHS = 10;
const MAX_POINTS_PER_LINE = 10000;
const MAX_STEP_DEG = 1;
const MAX_STEP_ALT = 0.015;
const gData = [...Array(N_PATHS).keys()].map(() => {
let lat = (Math.random() - 0.5) * 90;
let lng = (Math.random() - 0.5) * 360;
let alt = 0;
return [[lat, lng, alt], ...[...Array(Math.round(Math.random() * MAX_POINTS_PER_LINE)).keys()].map(() => {
lat += (Math.random() * 2 - 1) * MAX_STEP_DEG;
lng += (Math.random() * 2 - 1) * MAX_STEP_DEG;
alt += (Math.random() * 2 - 1) * MAX_STEP_ALT;
alt = Math.max(0, alt);
return [lat, lng, alt];
})];
});
const globe = new Globe(document.getElementById('globeViz'))
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
.pathsData(gData)
.pathColor(() => ['rgba(0,0,255,0.6)', 'rgba(255,0,0,0.6)'])
.pathDashLength(0.01)
.pathDashGap(0.004)
.pathDashAnimateTime(100000);
setTimeout(() => {
globe
.pathPointAlt(pnt => pnt[2]) // set altitude accessor
.pathTransitionDuration(4000)
}, 6000);
</script>
</body>