search

vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.99k stars 298 forks source link

add moving clouds feature #74

Closed rivebe closed 2 years ago

rivebe commented 2 years ago

Hi @vasturiano, first off. Thank you for this amazing wrapper/work! One feature request would be to make it easy to add in moving clouds, which rotate arround the globe.

An example as seen and explained here: http://thematicmapping.org/playground/webgl/earth/ See bottom of the article: https://blog.mastermaps.com/2013/09/creating-webgl-earth-with-threejs.html?m=1

I've tried adding non-moving clouds with the current functionality available: const globeMaterial2 = world.globeMaterial(); new THREE.TextureLoader().load('clouds/earthcloudmaptrans.jpg', texture2 => { texture2.side = THREE.DoubleSide; texture2.opacity = 0.8; texture2.transparent = true; texture2.depthWrite = false; globeMaterial2.alphaMap = texture2;

But I fail achieving the correct visualisation. Am I chossing the wrong material map?

vasturiano commented 2 years ago

@rivebe thanks for reaching out.

I've just added an example that includes moving clouds. You can check out the example source code here: https://github.com/vasturiano/globe.gl/blob/master/example/clouds/index.html