vasturiano / globe.gl

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

Transparent globe with PNG texture #173

Closed groupecomplus closed 10 months ago

groupecomplus commented 10 months ago

Is your feature request related to a problem? Please describe. I'm trying to create a transparent or semi-transparent globe mapped with a PNG texture with an alpha channel, so that the texture is visible also behind, like the example below.

Describe the solution you'd like An example in the documentation would be appreciated

Describe alternatives you've considered I've tried with opacity and transparent but the whole globe disappears, instead of keeping the texture visible. I tried also with THREE.TextureLoader() but I can't find a solution, the globe remains opaque or disappears completely.

Additional context Example of I'd like to achieve :

kisspng-earth-globe-world-world-png-transparent-image-5a77e76224a529 3501407115178074581501

vasturiano commented 10 months ago

@groupecomplus thanks for reaching out.

I believe for this to work as you intend you need to enable transparency on globe wrapping material. Something like:

myGlobe.globeMaterial().transparent = true;

Have you tried that already?

groupecomplus commented 10 months ago

Thanks ! That did it. If you accept PRs I'd add an example.