Babylon.js Loading Screen Change Image

Question

I am trying to change the loading logo of babylon js however all the tutorials and documentation I found on the official website are not working for me.

I am using a basic babylon viewer using

<babylon id="babylon-viewer" model="mymodel.gltf" templates.main.params.fill-screen="true"  observers.on-scene-init="globalSceneInitCallback"></babylon>

and some other javascript to control the camera.

I believe there is a simple way how to just change the loading-image, but cannot figure it out!

Regards and thanks

Answer 1

To change the default values of the babylon viewer's loading screen, you will need to modify the loading screen's template.

The configuration object looks like this:

loadingScreen: {
    html: loadingScreen,
    params: {
        backgroundColor: "#000000",
        loadingImage: images.loading,
        staticLoadingImage: images.staticLoading
    }
},

Just as you changed the fillScreen's parameter of the main template, you can change on of those 3 parameters - background color, loading image, and (better - OR) static loading image. Something along the lines of this:

<babylon id="babylon-viewer" model="mymodel.gltf" templates.loading-screen.params.loadingImage="http://LINK-TO-IMAGE" templates.main.params.fill-screen="true"  observers.on-scene-init="globalSceneInitCallback"></babylon>

or:

<babylon id="babylon-viewer" model="mymodel.gltf"  observers.on-scene-init="globalSceneInitCallback">
  <templates>
    <loading-screen>
      <params loadingImage="IMAGEURL">
      </params>
    </loading-screen>
  </templates>
</babylon>