globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
44 lines (37 loc) • 1.42 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script type="module">
import * as THREE from 'https://esm.sh/three';
// Gen random data
const N = 300;
const gData = [...Array(N).keys()].map(() => ({
lat: (Math.random() - 0.5) * 180,
lng: (Math.random() - 0.5) * 360,
alt: Math.random() * 0.8 + 0.1,
radius: Math.random() * 5,
color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
}));
const world = new Globe(document.getElementById('globeViz'))
.globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg')
.bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
.pointOfView({ altitude: 3.5 })
.customLayerData(gData)
.customThreeObject(d => new THREE.Mesh(
new THREE.SphereGeometry(d.radius),
new THREE.MeshLambertMaterial({ color: d.color })
))
.customThreeObjectUpdate((obj, d) => {
Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
});
(function moveSpheres() {
gData.forEach(d => d.lat += 0.2);
world.customLayerData(world.customLayerData());
requestAnimationFrame(moveSpheres);
})();
</script>
</body>