Applying PBR Texture to Imported GLTF mesh/file

Questions
1

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,

Question:

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(
      "",
      "/models/",
      "floor.gltf",
      this.scene
    );

 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(
      "./textures/floor_normal_001.png",
      this.scene
    );

    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?

PBR Texture
PBR Texture1920×821 68.4 KB

2

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

3

Hello and welcome!

Since you have a promise here, use await or .then to get the result.
See example here with console logs - https://playground.babylonjs.com/#0VHCTL#26

image
image1910×951 155 KB

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

1 Like