Hello,
I’ve made an animation for a loading screen with ellipses changing size over time. This animation works fine in the Playground and by opening the index file on his own, but running it through the localhost doesn’t play the animation.
I’ve redone it multiple times, even copy-pasted the index file from the playground into my project to see if I had missed some imports, but nothing changed. Is there something I missed?
Thank you for your time.
When you are saying - on localhost, how do you serve the files? Is there any error in the console? Are you using the file downloaded from the playground directly?
Hello, after a few more attempts, I’ve realized the issue does not come from the animation itself, and probably not from the localhost.
In this playground, I’m attempting to import a mesh asynchronously, and I have a loading screen showing the import progress. While the mesh is importing, the animation does not play. It will only play once the mesh had been imported, but since it immediately hides the UI on completion, I cannot see the animation.
Here, I have intentionally added an error in the then() method of the promise to show what the UI should look like when importing. Since I don’t have a .babylon file heavy enough to make the loading long enough for testing.
I don’t know why the animation doesn’t play on start. The UI is created before the import starts, and the animation is called in the CreateLoadingScreen() function for each ellipse in the UI.
Edit : I have found a bigger model to better illustrate my problem. You can now clearly see the loading progress and how the animation is supposed to play once the mesh has been imported
Hi @ClementSXD ! Welcome aboard!
I believe it’s because the loading/creating assets is running in the same thread as the ellipse loader animation and the loading process blocks the loader animation.
Check out this section of the docs:
https://doc.babylonjs.com/features/featuresDeepDive/scene/offscreenCanvas
or just use a regular HTML element to display a loader animation:
The reason this is happening is because the scene doesn’t render until it is considered ready. To override this you can make sure the scene is ready before starting the loading process. A simple way to do it is to add a single observable to the onBeforeRender observable:
Animation not playing while importing a model. | Babylon.js Playground (babylonjs.com)
You can also do it with a simple setTimeout
Hi Raanan, thank you, your solution was the most straightforward and easiest to implement. I thought it was weird ImportMeshAsync would block the main thread like Roland’s answer said, but maybe I’m wrong.
Thank you both for helping me with my project.