How to make a Transparent Globe

[Drosaca]

i don't know if it's a bug or not but i'm trying to turn the globe transparent like this.

I found the same issue here in the pure js version https://github.com/vasturiano/globe.gl/issues/20 when i tried this solution using react the globe has become entirely the same color as the background

here is the code

     const img = require('./assets/test.png')
    const globeE1 = useRef();
    useEffect(() => {
        const globeMaterial = globeE1.current.globeMaterial();
        globeMaterial.opacity = 0;
    }, [])
    return (
        <div >
            <Globe
                ref={globeE1}
                globeImageUrl={img.default}
                backgroundColor={'rgba(255, 255, 255, 12)'}
                animateIn={true}
                showAtmosphere={false}
                height={400}
                width={400}
            />

thanks for help

[vasturiano]

Thanks for reaching out Pedro.

You were certainly on the right track here. Your code essentially made the complete globe surface transparent, which means you were just seeing through to the background.

It seems that what you wanted was to add some shapes marking the land portions of the earth. And for that, you need to use the polygons layer, and load in geo data about the land shapes.

I've put together a simple example that does exactly that, by loading in topo json data from world-atlas.

Here's the hollow globe example. And the example source.

[Drosaca]

Thanks for your answer :),

In your example you used shapes described inside a json to create this nice 'hollow' effect but I'm wondering if it's possible to get the same effect using a png image to wrap the globe and edit the material properties in order to respect the alpha values from the image ?

[vasturiano]

Yes, you could certainly do that too, using the globe material alphaMap.

If you do have a px map of just the earth land, this would probably be the most performant manner to achieve your goal, even though drawing the polygons looks ok performance wise.