[Q] How to update/change globe texture ?

[jakubczaplicki]

So I was looking at the custom-globe-styling example and I though it would be interesting to present a night earth image during the night and then switch to day-image during a day.

What is the best way to update the texture on the globe (async) ?

I managed to do it in the satellite example by calling:

  async function asyncCall() {
    while (true) {
      Globe.globeImageUrl('../img/earth-day.jpg')
      await new Promise(resolve => setTimeout(resolve, 2000));

      Globe.globeImageUrl('../img/earth-night.jpg')
      await new Promise(resolve => setTimeout(resolve, 2000));
    }
  }

  asyncCall();

(which isn't perfect as it seems to "hold" the UI during texture update)

But I can't figure out how do similar thing in the custom-globe-styling

[vasturiano]

@jakubczaplicki thanks for reaching out.

From your code, looks like you're using globe.gl, not the React wrapper, right? Fyi, that's a separate repo.

Regardless, the momentary UI hold you described is usually due to the time it takes to create a texture object in ThreeJs.

So, if you'd like to switch back and forth between images, I'd suggest loading/caching the textures yourself and simply assign them at will to the globe material via:

myGlobe.globeMaterial().map = textureDay;

This should be a light-weight operation with minimal impact on UI rendering performance.

Loading a texture can be simply done by:

new THREE.TextureLoader().load('../img/earth-day.jpg', textureDay => { ... });

[jakubczaplicki]

thanks @vasturiano ! Indeed it looks like I have confused the two repos. Your comment is superhelpful. Thank you! I might come back with more ;)