Applying PBR Texture to Imported GLTF mesh/file

So I’m a bit confused - A newbie to the world of BabylonJS

So I plan to import a scene from Blender to BabylonJS. I have it looking decent in Blender but when I import to BabylonJS. It lacks the texture.

So my question is this,


How do I access the loaded gltf and apply the PBR texture. When I try to access the floor variable and try to access the material, it doesn’t exist. When I go back to basics and create a plane, then the correct pbr texture is displayed.

async createEnvironment(): Promise<void> {
    const floor = SceneLoader.ImportMeshAsync(
 CreateFloor(): PBRMaterial {
    const pbr = new PBRMaterial("pbr", this.scene);

    pbr.albedoTexture = new Texture("./textures/floor_001.png", this.scene);

    pbr.roughness = 1;

    pbr.bumpTexture = new Texture(

    pbr.invertNormalMapX = true;
    pbr.invertNormalMapY = true;

    return pbr;

Trying floor.material = this.CreateFloor();

doesn’t seem to work.

So in summary.

How do I assign the fancy texture to the floor.

I’ve included a screenshot on how it looks when loaded into BabylonJS and as you can see in the texture window, it has the baked lighting that I want it to display in the main window.

It’s probably my immense lack of knowledge, but just not to sure on where to start.

P.S - Do I have to get it to find the material by name within the model and then apply it?

Welcome abroad!
The ImportMeshAsync function returns a promise rather than the mesh, so it seems that you need to deal with it.

Hello and welcome!

Since you have a promise here, use await or .then to get the result.
See example here with console logs -

So when you have promise fulfilled you’ll be able to get it from res.meshes array or with scene.getMeshByName()

1 Like