Loading Screen (custom if possible)

Questions
1

Hi there,
i was trying to create a portfolio website with babylon and it’s almost done.
But i couldn’t add loading screen on it. Tried many differents codes on it that i found on forums but they didn’t work…
https://www.babylonjs-playground.com/#I5CRIN#1

please help me about to add loading code to right place
Have a nice day,

2

Hi.
I think this is pretty much self explanatory.

But let’s go part by part (look at the image bellow).

image
image898×507 29.3 KB

I → you create your loading screen (you do this as you would create any page on web, via HTML/CSS).
II → in js you get reference to your customScreen…
III->override default behavior of the loading screen. For example what I usually do here is just control the display property of the screen. So something like

displayLoadingUI = function() {customScreen.style.display = “flex”}
hideLoadingUI= function() {customScreen.style.display = “none”}

IV → finally create your new object and tell engine what are you using as a loading screen.

What I would suggest if you are importing multiple meshes is to use AssetsManager, as it allows you to control your assets better, and allows you to control loading process much better, as you can chain and track your asset loading one by one basically.

1 Like
3

Hi Nogalo,
Thank you for that detailed explanation. I read that docs and tried it before, but after your explanation tried again. same result. Adding Screenshot down here.

load
load1531×499 40.1 KB

4

Well, if you follow your code you can see that the engine is not created at the moment when you are trying to set loadingScreen.

image
image1355×458 168 KB

I am not sure where are you creating and engine exactly, but just make sure that engine exists before you try to set the loadingScreen (or do anything with engine)

5

Basically just put that part of code inside createScene().

1 Like