globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
40 lines (32 loc) • 1.36 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';
const world = new Globe(document.getElementById('globeViz'), { animateIn: false })
.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');
// Auto-rotate
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 0.35;
// Add clouds sphere
const CLOUDS_IMG_URL = './clouds.png'; // from https://github.com/turban/webgl-earth
const CLOUDS_ALT = 0.004;
const CLOUDS_ROTATION_SPEED = -0.006; // deg/frame
new THREE.TextureLoader().load(CLOUDS_IMG_URL, cloudsTexture => {
const clouds = new THREE.Mesh(
new THREE.SphereGeometry(world.getGlobeRadius() * (1 + CLOUDS_ALT), 75, 75),
new THREE.MeshPhongMaterial({ map: cloudsTexture, transparent: true })
);
world.scene().add(clouds);
(function rotateClouds() {
clouds.rotation.y += CLOUDS_ROTATION_SPEED * Math.PI / 180;
requestAnimationFrame(rotateClouds);
})();
});
</script>
</body>