globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
49 lines (41 loc) • 1.46 kB
HTML
<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 = Globe()
.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.4)', 'rgba(255,0,0,0.4)'])
.pathDashLength(0.01)
.pathDashGap(0.004)
.pathDashAnimateTime(100000)
(document.getElementById('globeViz'));
setTimeout(() => {
globe
.pathPointAlt(pnt => pnt[2]) // set altitude accessor
.pathTransitionDuration(4000)
}, 6000);
</script>
</body>