-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (89 loc) · 2.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
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
102
103
<head>
<style>
body {
margin: 0;
}
#time-log {
position: absolute;
font-size: 12px;
font-family: sans-serif;
padding: 5px;
border-radius: 3px;
background-color: rgba(200, 200, 200, 0.1);
color: lavender;
bottom: 10px;
right: 10px;
}
</style>
<script src="//unpkg.com/three"></script>
<script src="//unpkg.com/satellite.js/dist/satellite.min.js"></script>
<script src="//unpkg.com/globe.gl"></script>
</head>
<body>
<div id="chart"></div>
<div id="time-log"></div>
<script>
const EARTH_RADIUS_KM = 6371; // km
const SAT_SIZE = 100; // km
const TIME_STEP = 3 * 1000; // per frame
const timeLogger = document.getElementById("time-log");
const world = Globe()(document.getElementById("chart"))
.globeImageUrl("//unpkg.com/three-globe/example/img/earth-night.jpg")
.backgroundImageUrl("//unpkg.com/three-globe/example/img/night-sky.png")
.objectLat("lat")
.objectLng("lng")
.objectAltitude("alt")
.objectFacesSurface(false)
.objectLabel("name");
setTimeout(() => world.pointOfView({ altitude: 3.5 }));
const satGeometry = new THREE.OctahedronGeometry(
(SAT_SIZE * world.getGlobeRadius()) / EARTH_RADIUS_KM / 2,
0
);
const satMaterial = new THREE.MeshLambertMaterial({
color: "palegreen",
transparent: true,
opacity: 0.7,
});
world.objectThreeObject(() => new THREE.Mesh(satGeometry, satMaterial));
fetch("./datasets/space-track-leo.txt")
.then((r) => r.text())
.then((rawData) => {
const tleData = rawData
.replace(/\r/g, "")
.split(/\n(?=[^12])/)
.filter((d) => d)
.map((tle) => tle.split("\n"));
const satData = tleData
.map(([name, ...tle]) => ({
satrec: satellite.twoline2satrec(...tle),
name: name.trim().replace(/^0 /, ""),
}))
// exclude those that can't be propagated
.filter((d) => !!satellite.propagate(d.satrec, new Date()).position)
.slice(0, 2000);
// time ticker
let time = new Date();
(function frameTicker() {
requestAnimationFrame(frameTicker);
time = new Date(+time + TIME_STEP);
timeLogger.innerText = time.toString();
// Update satellite positions
const gmst = satellite.gstime(time);
satData.forEach((d) => {
const eci = satellite.propagate(d.satrec, time);
if (eci.position) {
const gdPos = satellite.eciToGeodetic(eci.position, gmst);
d.lat = satellite.radiansToDegrees(gdPos.latitude);
d.lng = satellite.radiansToDegrees(gdPos.longitude);
d.alt = gdPos.height / EARTH_RADIUS_KM;
}
});
world.objectsData(satData);
})();
});
// Add auto-rotation
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 0.6;
</script>
</body>