Show loading gif on button click to change the model texture

Questions
, , ,
1

I want to show loading gif when i click buton and the gif to get invisible after the model is loaded how can i do that i did some reasearch but was not able to do so.

2

Hi @Ashish_Abhiwan

I think you should find what you need in this doc page : Creating Custom Loading Screens | Babylon.js Documentation

3

@Cedric thanks for the reference of the doc, is there any funtion that checks that if the model is loaded or not and then makes loading canvas visibility off

4

Well i am doing this in the code its working but the loadingpanel gets invisible before the mesh gets loaded again.

    var button11 = BABYLON.GUI.Button.CreateImageOnlyButton("Texture3", "https://raw.githubusercontent.com/Ashishj34/BabylonModels/main/Textures/KALAHARI BROWN.jpg ");
    currentButton = button11;
    button11.width = btnW;
    button11.height = btnH;
    button11.color = btnColor;
    button11.cornerRadius = 100;
    button11.thickness = 0;
    button11.onPointerUpObservable.add(function () {
        currentButton.thickness = 0;
        currentButton = button11;
        currentButton.thickness = 2;
        leaname.text = "KALAHARI\nBROWN";
        leaname.fontSize = fonttext;
        var textureblack = new BABYLON.StandardMaterial("textureblack", scene);
        Loadingpanel.isVisible = true;
        textureblack.diffuseTexture = new BABYLON.Texture("https://raw.githubusercontent.com/Ashishj34/BabylonModels/main/Textures/KALAHARI BROWN.jpg", scene);
        textureblack.bumpTexture = new BABYLON.Texture("https://raw.githubusercontent.com/Ashishj34/BabylonModels/Dev/Normals/Normals/KALAHARI BROWN.bmp", scene);
        textureblack.diffuseTexture.uScale = 10;
        textureblack.diffuseTexture.vScale = 10;
        textureblack.bumpTexture.uScale = 10;
        textureblack.bumpTexture.vScale = 10;
        textureblack.specularColor = new BABYLON.Color3(.1, .1, .1);
        Bag.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NOTLOADED;
        Bag.hasAlpha = true;
        Bag.material = textureblack;
        Stich.overlayColor = new BABYLON.Color3(0.97, 0.75, 0.41)
        Stich.renderOverlay = true;
        textureblack.diffuseTexture.onLoadObservable.add(tex => {
            console.log('alpha:', textureblack.hasAlpha)
           Loadingpanel.isVisible = false;
        })
    });
    kaligd.addControl(button11, 0, 0);
5

Can you provide a PG please ?

6

https://playground.babylonjs.com/#SI13I2#46 THIS IS THE PG WHEN WE CLCIK ON THE LEATHER TEXTURE BUTTON THE MODEL IS NOT VISIBLE FOR SOME TIME AND AFTER SOME TIME THE MODEL GETS LOADED SO I WANT TO ADD A LOADING GIF ON THE BUTTON CLICK

7

from what I understand in your code, you change the texture.
I would suggest to set a spinner and in the onLoad callback, it gets hidden.
Check the texture constructor:

8

yes i have already gone throught the doc but was not able to do so can u plz help me

9

You can do somthing like this pseudo code:

EnableSpinner();
textureblack.diffuseTexture = new BABYLON.Texture("https://raw.githubusercontent.com/Ashishj34/BabylonModels/main/Textures/KID SUEDE GENUINE LEATHER TAN.jpg", scene, undefined, undefined, undefined,
 () => {
DisableSpinner();
});
10

I am getting error
image

and is i have used it correctly

    var button11 = BABYLON.GUI.Button.CreateImageOnlyButton("Texture3", "https://raw.githubusercontent.com/Ashishj34/BabylonModels/main/Textures/KALAHARI BROWN.jpg ");
    currentButton = button11;
    button11.width = btnW;
    button11.height = btnH;
    button11.color = btnColor;
    button11.cornerRadius = 100;
    button11.thickness = 0;
    button11.onPointerUpObservable.add(function () {
       // Loadingpanel.isVisible = true;
        currentButton.thickness = 0;
        currentButton = button11;
        currentButton.thickness = 2;
        leaname.text = "KALAHARI\nBROWN";
        leaname.fontSize = fonttext;
        var textureblack = new BABYLON.StandardMaterial("textureblack", scene);
        // textureblack.diffuseTexture = new BABYLON.Texture("https://raw.githubusercontent.com/Ashishj34/BabylonModels/main/Textures/KALAHARI BROWN.jpg", scene);

        EnableSpinner();
        textureblack.diffuseTexture = new BABYLON.Texture("https://raw.githubusercontent.com/Ashishj34/BabylonModels/main/Textures/KID SUEDE GENUINE LEATHER TAN.jpg", scene, undefined, undefined, undefined,
         () => {
        DisableSpinner();
        });
    //    textureblack.bumpTexture = new BABYLON.Texture("https://raw.githubusercontent.com/Ashishj34/BabylonModels/Dev/Normals/Normals/KALAHARI BROWN.bmp", scene);
        textureblack.diffuseTexture.uScale = 10;
        textureblack.diffuseTexture.vScale = 10;
       // textureblack.bumpTexture.uScale = 10;
       // textureblack.bumpTexture.vScale = 10;
        textureblack.specularColor = new BABYLON.Color3(.1, .1, .1);
        Bag.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NOTLOADED;
        Bag.hasAlpha = true;
        Bag.material = textureblack;
        Stich.overlayColor = new BABYLON.Color3(0.97, 0.75, 0.41)
        Stich.renderOverlay = true;
    });
    kaligd.addControl(button11, 0, 0);
11

EnableSpinner is pseudo code, you have to code it or change some properties. It’s meant to explain you how to use the texture loading callback.

12

can u plz explain that in detail that will be more helpfull for me to understand

13

Here is a quick modification of your PG:

displayLoadingUI

Select the 4th leather button to show the loading text.
Now, you can tweak the displayLoadingUI to put the loading screen you want.

14

Thanks for the help it worked

2 Likes