search

vasturiano / globe.gl

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

How to have transparent background? #39

Closed marcusround closed 3 years ago

marcusround commented 3 years ago

Hi,

Thanks for this great and easy-to-use component.

I am reasonably comfortable with Three.js and know how to work with that, so while I could use three-globe, I am using globe.gl for a project for its convenience for things like the mouseover functionality.

I know I can access some of the lower level Three.js stuff with world.renderer(), world.camera() etc. but I have tried poking around and can't find out exactly where or how globe.gl is setting the background colour on the three renderer.

Is there an easy way to just make globe.gl have a transparent background? (If not, I suggest there should be, eg. .setBackgroundColor(false) or whatever). I see the default passed to the Three renderer is alpha: true but that doesn't seem like it has any effect.

If there is not an easy way, where in the three.js code can I do it myself? (Things like world.renderer().setClearColor(0xffffff, 0) have proved fruitless.)

vasturiano commented 3 years ago

@marcusround thanks for reaching out.

Should be as simple as setting an alpha channel of 0 in the background color def. Like:

myGlobe.backgroundColor('rgba(0, 0, 0, 0)')

The alpha value gets picked up by the component automatically and used to set the clear color of the background.

marcusround commented 3 years ago

Ah thank you, that worked! I always work with hex values so didn't think to try a string like that.