# Load a model after loading scene.render

**URL:** <https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236>\
**Category:** Questions\
**Created:** [August 9, 2020, 4:42pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236 "2020-08-09T16:42:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [August 9, 2020, 4:42pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/1 "2020-08-09T16:42:47Z")

</div>

Hi,

To cut the loading time when you load the webpage for the first time, I am trying to load assets such as importing videos/models after the scene has been loaded. That is I am first showing simple elements such as sphere and cube, then later I am loading 3D model. Is there a solution that I can achieve with this?

class Playground

```
    {

        static CreateScene(engine, canvas)

        {
//.....

//Model to load after the scene loads
BABYLON.SceneLoader.ImportMesh("", "Models/", "scene.gltf", scene, function (vpMesh) {  

            var vp = vpMesh[0]; 
            vpMesh.forEach((m) => m.renderingGroupId = 3);
            }, undefined, undefined, '.gltf');

            return scene;

        }
    }
createScene = function () { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }

    var engine;

    try

    {

        engine = createDefaultEngine();

    } catch (e)

    {

        console.log("the available createEngine function failed. Creating the default engine instead");

        engine = createDefaultEngine();

    }

    if (!engine) throw 'engine should not be null.';

    scene = createScene();

    sceneToRender = scene;

    scene.executeWhenReady(() =>

    {

        engine.runRenderLoop(function ()

        {

            if (sceneToRender)

            {

                sceneToRender.render();

            }

        });

    });
```

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [August 9, 2020, 6:11pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/2 "2020-08-09T18:11:14Z")

</div>

Hi again, Saif.

Big topic. Many programmers seek this.

I would say… step 1… get to know the [BabylonJS “AssetsManager” system](https://doc.babylonjs.com/how_to/how_to_use_assetsmanager). It is very powerful, and more modern than the _SceneLoader_ methods.

What you ask… is sometimes called “[progressive loading](https://forum.babylonjs.com/search?q=progressive%20loading)” or “[incremental loading](https://forum.babylonjs.com/search?q=incremental%20loading)”. Please visit these two links… read what others have asked/done, and maybe borrow some code. 🙂

I see you are working with .gltf, so let’s visit @bghgary’s “[progressive loading doc](https://doc.babylonjs.com/how_to/progressively_load_gltf)”, too. Unfortunately, all of its demo code uses the older SceneLoader methods.

There is also a doc about “[incremental loading](https://doc.babylonjs.com/how_to/using_the_incremental_loading_system)”… but again, SceneLoader-based.

SceneLoader methods are not “bad” by any means, but… AssetsManager methods MAY BE more-ready for progressive/incremental loading.

You might wish to pay particular attention to AssetsManager docs… “Task state and error handling” ([section 1.2](https://doc.babylonjs.com/how_to/how_to_use_assetsmanager#task-state-and-error-handling)) and “Manager callbacks and observables” ([section 1.3](https://doc.babylonjs.com/how_to/how_to_use_assetsmanager#manager-callbacks-and-observables)).

Ok, that should be plenty of intro-info for incremental/progressive loading. I hope I have been helpful. Stay tuned for more/better replies.

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [August 9, 2020, 6:30pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/3 "2020-08-09T18:30:38Z")

</div>

Hey thanks! I will check incremental loading. Hopefully will get somewhere. I guess with incremental loading, I can load even other assets such as images and videos? Because loading higher MB files through scene load takes time hence I was looking for now termed as “incremental/progressive” loading.

---

<div class="post-metadata">

**Author:** ![gbz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gbz/32/23780_2.png) [@gbz](https://forum.babylonjs.com/u/gbz)\
**Post date:** [August 9, 2020, 8:24pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/4 "2020-08-09T20:24:07Z")

</div>

@saifshk17, perhaps `ImportMeshAsync` can help, as shown in [Use Promises - Babylon.js Documentation](https://doc.babylonjs.com/how_to/promises) under section **Loading two glTF assets in parallel**

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [August 10, 2020, 12:52pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/5 "2020-08-10T12:52:23Z")

</div>

Hey,

Could you please help me out here. I could only find incremental scene loading. Babylonjs has also provided tools for this. Unfortunately I cannot find any solution for incremental model(.gltf) loading. Has anyone tried to use SceneLoader.ImportMesh after the scene has been loaded?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 10, 2020, 2:28pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/6 "2020-08-10T14:28:41Z")

</div>

It seems it works, see this thread:

> [@Using Await AppendAsync in a switch/if statement](https://forum.babylonjs.com/t/using-await-appendasync-in-a-switch-if-statement/13250):
>
> Hello folks, I have a major issue with the await AppendAsync function. It works fine whenever I use that function outside of any switch/if/for/while statements, but I really want to keep on using that function because it helps me with what I’m doing. Here is the PG for what I’m doing: [My PG](https://playground.babylonjs.com/#E7LBE5) Thanks in advance.

Instead of using `AppendAsync` I used `ImportMeshAsync`:

> **[Babylon.js Playground](https://playground.babylonjs.com/#E7LBE5%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Give focus to the display area and hit the space bar key to make the glb load.

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [August 10, 2020, 2:53pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/7 "2020-08-10T14:53:16Z")

</div>

Hey thanks alot! It definitely loads the model. However now it does not load any materials/textures. It was loading when I was using ImportMesh in my code before. Now I am not sure why it does not. I can send the model to you if you would like to see. 🤐

```
scene.onKeyboardObservable.add(async(kbInfo) => {
                switch (kbInfo.type) {
                    case BABYLON.KeyboardEventTypes.KEYUP:
                        switch (kbInfo.event.key) {
                            case " ":
                                //await BABYLON.SceneLoader.AppendAsync("", "https://dl.dropbox.com/s/b7bjy69g307d64h/Thonker.glb", scene);
                                await BABYLON.SceneLoader.ImportMeshAsync(null, "Models/", "scene.gltf", scene);

                                break;
                        }
                        break;
                }
            });
```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 10, 2020, 3:03pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/8 "2020-08-10T15:03:03Z")

</div>

Loading materials / textures does definitely work:

[https://playground.babylonjs.com/#E7LBE5#3](https://playground.babylonjs.com/#E7LBE5#3)

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [August 10, 2020, 3:15pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/9 "2020-08-10T15:15:26Z")

</div>

Then I guess it is a problem with my model. This is the model I have which I got from TurboSquid for free. It is very strange that it works in my code that I posted above but does not work in the code you gave.

> **[Model.zip](https://www.dropbox.com/s/c3o7on5k0acd6p5/Model.zip?dl=0)**
>
> Shared with Dropbox

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 10, 2020, 5:52pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/10 "2020-08-10T17:52:25Z")

</div>

I have tested with your model in my local repository and it does work:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/e73cadeffe741e461ecf00387dc6431a3d014977.jpeg)

However, it took some time to download the textures, so make sure you wait enough time.

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [August 10, 2020, 6:08pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/11 "2020-08-10T18:08:42Z")

</div>

Oh cool! It could be because I was loading other huge stuff as well. Is there a way to add an alert(“completed”) after the model and textures are imported? Sorry for asking these many questions but this is very important for me. Thank you.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 10, 2020, 6:17pm UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/12 "2020-08-10T18:17:30Z")

</div>

Add this just before the `await BABYLON.SceneLoader.AppendAsync(...)` line:

```javascript
scene.executeWhenReady(() => {
    console.log("ready");
});

```

---

<div class="post-metadata">

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\
**Post date:** [August 11, 2020, 7:42am UTC](https://forum.babylonjs.com/t/load-a-model-after-loading-scene-render/13236/13 "2020-08-11T07:42:08Z")

</div>

Evgeni, thank you for all these solutions. I actually found the issue. It is a bug in Babylonjs. When I upload a sprite along, the 3D model with textures do not get uploaded. When I comment out the sprite code, the model with textures get uploaded. I am sure its a bug. I will upload as a separate question.