vasturiano / three-globe

WebGL Globe Data Visualization as a ThreeJS reusable 3D object
https://vasturiano.github.io/three-globe/example/links/
MIT License
1.19k stars 145 forks source link

Attach Clouds to initial Globe animation #90

Closed Alwinator closed 6 months ago

Alwinator commented 7 months ago

Is your feature request related to a problem? Please describe. When loading the website, the Globe makes a beautiful animation. However the Clouds do not make this animation which looks weird in my opinion. See official demo: https://vasturiano.github.io/three-globe/example/clouds/

Describe the solution you'd like I would love to see some feature to animate the clouds and the Globe together in the initial animation.

Describe alternatives you've considered I thought of animation the Clouds in a similar way, but I will never get the exact same timing as the Globe.

samnrubin commented 7 months ago

I also ran into this, ended up using a fade-in effect by setting cloud opacity to zero to start and tweening the opacity back up after the globe loads. It's not exactly the same as tying the animations together, but it still provides a decent looking transition

vasturiano commented 6 months ago

Thanks for reaching out @Alwinator.

I think there's two ways to achieve this. One is to add the clouds directly as a child of the Globe object instead of the global scene, so that they inherit the animation transformations. This what has been done in this example (https://github.com/vasturiano/three-globe/commit/2c52b4ca5b962007799fd0e41f26a55744c49801)

The second is to cancel the inner animation altogether (via animateIn: false) and then animate both the globe and clouds as a group yourself externally.

Alwinator commented 6 months ago

Thank you so much @vasturiano! Since I migrated to globe.gl in the meantime, is there also the option to add the clouds to the globe directly?

vasturiano commented 6 months ago

@Alwinator in that case I would suggest to add it as a custom layer, so that it stays attached to the globe.

Alwinator commented 6 months ago

@vasturiano Thank you so much! I works like a charm! I love your library and I am very grateful that you made it. :)