AddEventListener on globeImageUrl

[PabloIBM]

Hey Vasco, first of all, congratulations on the project, it's amazing.

I have a question about a project I'm working on using this Globe.gl library.

I have a representation of a planet and a couple of buttons (3 to be specific), each button loads an image for the Globe(world.globeImageUrl), having the satellite view, the world temperature and the height image.

There is some image that takes me a long time to load due to the fact that it has to be rescaled, I think, so I would like to add a loader element so that the user knows that the image of the planet is being loaded, but I cannot apply the AddEventListener to the load the image into the Globe().

Is there a more correct method or way to apply this "LoadListener" to be able to generate a LoadingScreen until the image is loaded on the globe?

Thank you very much.

[vasturiano]

@PabloIBM thanks for reaching out.

If it's the first image that you apply to the globe, you have the possibility to do this via the onGlobeReady callback. Keeping in mind this only waits until the image is pulled and applied before triggering if the init option waitForGlobeReady is set (on by default).

But if you're trying to do this on subsequent changes of the globe image, then it won't help you. For that, I'd suggest to do the loading of the image texture yourself directly, and then apply it to the globe via the globeMaterial method. That will give you access to the internals of the async network request method and you'll be able to know when the load is finished. You can see how that is done inside this module, and it's actually a rather simple operation. globeImageUrl only exists as a simple convenience wrapper around this. https://github.com/vasturiano/three-globe/blob/71291f36a20db423e4e59e9679b78f06d1782c4e/src/layers/globe.js#L97-L100

[black-snow]

@vasturiano could you elaborate this a bit more? I'm trying to rotate the globe twice while swapping the globeImage but there ain't seem to be like an animation end callback or the like. When I call pointOfView a second time before the first animation has finished it just skips it.

/edit: I'll try to hook into globe.controls()._listeners.end /edit2: When I push onto that array it only gets fired if I click the scene ... :/