Loading screen bar

Content creation (3dsMax, Maya, Blender, glTF)
1

I have more than 2 GLTF models to load, how do I show total progress of the scene loaded? I want to create a progress bar and I wanna know how to o it when I want to load more than 2 models.

2

Hi and Welcome to the Community,

First thing you will want to have a look at is how to create a default or custom loading screen in BJS.
You will find some valuable information for that in the docs. I would advise to also watch the small video.

Basically, you are going to create a loadingUI on a top layer above your scene. Depending on progress (promise or loading rate) you will interact with this layer and, on loaded, you will hide this layer.
Loading multiple models and displaying the loading rate for each is likely best achieved when combined with a promise. You will load each model with a promise and on this promise you will display information that the model has been loaded. Next, you can re-initialize the loading bar and display the information and loading rate for your next model. Once all models have been committed with the promise, you will just hide the loading UI.
Take a tour of the doc, watch the video, next if you need more help or a PG, you are welcomed to return here and we will guide you through finalizing your first loading UI.
Meanwhile, have a great day and again welcome to our Community :smiley:

Edit: If you want to show the total progress of loading all models, you can use promise.all(), combined with a ‘function (evt)’ using the event ‘evt.lengthComputable’. You will want to do this inside your object import promise.

It will look something like this (inside your promise or promise.all for your object(s) import:

       function (evt) {
            console.log("object is loading");
            // onProgress
            var loadedPercent = 0;
            if (evt.lengthComputable) {
                loadedPercent = (evt.loaded * 100 / evt.total).toFixed();
            } else {
                var dlCount = evt.loaded / (1024 * 1024);
                loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
            }
        }
1 Like
3

Here are some simple examples - https://playground.babylonjs.com/#CGA05F#66
(See console) - https://playground.babylonjs.com/#11BH6Z#333

1 Like