Hold initial render until globe texture loads

[edwmurph]

I would like to be able to prevent the globe from rendering until the globe texture is loaded. In other words, I don't want the default black globe to show while the globe texture image is loading.

One way to achieve this is by doing exposing the globe's texture in the api and then using it like this:

new THREE.TextureLoader().load('/map.jpg', globeTexture => {
  this.scene.add( new ThreeGlobe().globeTexture(globeTexture) )
})

this way the globe renders when the texture is ready.

There's probably a few other ways to accomplish this, and this change would also need some documentation changes, but I wanted to get your thoughts before proceeding any further.

[vasturiano]

Hi @edwmurph, I like this idea but I would rather have it without altering the current API. In other words, the module should know to hold the initial render until the globe texture has loaded asynchronously from the image URL, all handled internally.

I think that would be better than forcing the consumer to handle that asynchronicity themselves. Wdyt?

[edwmurph]

I agree and like that better I’ll give it a shot

[edwmurph]

@vasturiano could you give this another look when you get a chance?

[vasturiano]

@edwmurph sorry only saw the new changes now.

I'm thinking that ideally loading the globe texture would also delay the initial scene rendering and globe build-in animation (rotate into position, happening here: https://github.com/vasturiano/three-globe/blob/master/src/globe-kapsule.js#L263 ).

A possible implementation of this would have the globe layer expose a callback prop onGlobeReady(), invoked once after running addGlobe(). The main component would perform the build-in animation on trigger of state.globeLayer.onGlobeReady(() => ...). Wdyt?

[edwmurph]

@vasturiano I agree loading the globe texture should also delay the initial scene rendering. I tried implementing your approach but am still wrapping my head around the larger architecture of this project so I'm not confident I implemented it in the best way.

[vasturiano]

@edwmurph thanks for the changes. Could you grant me edit rights over the PR so I do some small updates?

[vasturiano]

Thanks again for the PR @edwmurph! I've done some changes that exposes the option to wait for the globe ready using a initialization config flag (waitForGlobeReady). 👍