# Change material in the model during asynchronous loading

**URL:** <https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170>\
**Category:** Questions\
**Tags:** material, import\
**Created:** [March 30, 2024, 7:52am UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170 "2024-03-30T07:52:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![a.dzhakhangirov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/a.dzhakhangirov/32/45723_2.png) [@a.dzhakhangirov](https://forum.babylonjs.com/u/a.dzhakhangirov)\
**Post date:** [March 30, 2024, 7:52am UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/1 "2024-03-30T07:52:44Z")

</div>

Hi, help me, please! In my example, I change the color of the alien’s shirt during loading SceneLoader.ImportMesh. How do I change the material on the model when loading asynchronously - SceneLoader.ImportMeshAsync?  
After downloading, so that it can be used in the gui, for example.  
[Load multiple glTF assets | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#U2KKMK#268)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 30, 2024, 8:20am UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/2 "2024-03-30T08:20:12Z")

</div>

Unless I misunderstood, you already did it (nearly). Make sure to create the mat before assigning.  
Next, you have multiple ways to make it. You could first declare the mesh and/or material you want to change within the import, and then just swap it. Or, you can just get the descendants and select by name or id (or use ‘includes’ to pick from a portion of name or id). Anyway, here for the very basic version.

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

I hope I didn’t miss anything from your question, did I? Else, have a great Easter holiday 🐇 🕶

---

<div class="post-metadata">

**Author:** ![a.dzhakhangirov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/a.dzhakhangirov/32/45723_2.png) [@a.dzhakhangirov](https://forum.babylonjs.com/u/a.dzhakhangirov)\
**Post date:** [March 30, 2024, 8:41am UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/3 "2024-03-30T08:41:37Z")

</div>

Yes, thank you very much! I think this is what is needed.

---

<div class="post-metadata">

**Author:** ![a.dzhakhangirov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/a.dzhakhangirov/32/45723_2.png) [@a.dzhakhangirov](https://forum.babylonjs.com/u/a.dzhakhangirov)\
**Post date:** [April 1, 2024, 10:09am UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/4 "2024-04-01T10:09:51Z")

</div>

I’m sorry, to continue the question. Is it possible to assign new material to an asynchronously loaded model rather than change it? Or, for example, change the position of the model after creation. In general, how to access the mesh after loading? Something like this in the GUI or action manager:

```
      meshes.forEach(function(item, index) {
      mesh[index].material = newMaterial;  
      mesh[index].position = new BABYLON.Vector3(0, 0, 0);                 
      });

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 1, 2024, 2:55pm UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/5 "2024-04-01T14:55:20Z")

</div>

I’m not sure to fully understand your question. May be you should try set-up a PG (even faulty).  
I believe in my example (PG above) I am already assigning a new material (created on line 6… new standardMaterial).  
And overall, within the async function you can make transforms (any transform) as long as:

1. the required sources are available (material is created, script is loaded, etc…)
2. since it’s async, you may not perform single calls to a function or property that’s working with a callback (or you might set it on each frame and will either break or eventually generate an error)

Apart from that, you can do pretty much all transform you want (eventually a good idea is that WHILE making these transforms, have your ‘mesh.isVisible = false’ or ‘mesh.setEnabled(false)’ until you’re done.

And then, AFTER LOAD (read outside the function), access your meshes though either name or ID (or an ‘includes’ from the name or ID).

---

<div class="post-metadata">

**Author:** ![a.dzhakhangirov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/a.dzhakhangirov/32/45723_2.png) [@a.dzhakhangirov](https://forum.babylonjs.com/u/a.dzhakhangirov)\
**Post date:** [April 1, 2024, 4:32pm UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/6 "2024-04-01T16:32:59Z")

</div>

[Load multiple glTF assets | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#U2KKMK#273)

Here’s the PG. How would I change the material of the shirt and its position, for example, by clicking on the button.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 1, 2024, 5:01pm UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/7 "2024-04-01T17:01:18Z")

</div>

Yeah, so you’re accessing outside of the loading function. Means you cannot use ‘result’ because it’s not at root level. You have a number of options to send your ‘result’ meshes to the root, but essentially…  
**You can access meshes in the scene through either their name or id**

Here’s a quick revised version PG

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

Hope this helps (sorry time for me to go make dinner 🥗 😁) Cya later,

---

<div class="post-metadata">

**Author:** ![a.dzhakhangirov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/a.dzhakhangirov/32/45723_2.png) [@a.dzhakhangirov](https://forum.babylonjs.com/u/a.dzhakhangirov)\
**Post date:** [April 1, 2024, 5:30pm UTC](https://forum.babylonjs.com/t/change-material-in-the-model-during-asynchronous-loading/49170/8 "2024-04-01T17:30:48Z")

</div>

Brilliant, thanks)) Bon Appetit!
