Custom loading screen not appearing while the model is loading in the background

Questions
1

I have implemented a custom loading screen ( a simple div with higher z-index and span the entire canvas ) that is activated on load and gets deactivated by adding display: none after the scene is loaded.

First, I create and register two prototype functions for enabling and hiding the loading UI like so…
function customLoadingScreen() {

}
customLoadingScreen.prototype.displayLoadingUI = function () {

  loadingScreenDiv.innerHTML = 'loading';

};
customLoadingScreen.prototype.hideLoadingUI = function () {

  loadingScreenDiv.style.display = 'none';

};

Second, I register the customLoadingScreen in the engine like so…
var loadingScreen = new customLoadingScreen();
engine.loadingScreen = loadingScreen;

Third, I enable the loading screen right before calling the createScene() function like so…
engine.displayLoadingUI();
startRenderLoop(engine, canvas);
window.scene = delayCreateScene();

Fourth, I disable the loading screen right before I return the scene in delayCreateScene() function like so…
engine.hideLoadingUI();
return scene;

Yet, the loading screen doesn’t appear and my UI is all white till the model loads.

Here’s the codepen…

2

Babylon has built in support for custom loading screens: Creating Custom Loading Screens | Babylon.js Documentation (babylonjs.com)

1 Like
3

I have tried it but I am definitely missing something out. I have been facing few more problems along with this one as I keep learning. I created a small CodePen to simulate the issues. You can check them out here…

4

There is no need to include the Babylon Viewer script, since you’re creating your own viewer anyway. Your code structure could be simplified too, to ensure that everything is running when supposed to. I recommend checking out the code structure here: Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation (babylonjs.com)

1 Like