SceneLoader.ImportMesh fails to apply material

Questions
1

I have arrived here via threejs and I am trying some things that I know is simple, but cannot get it to work.

I create a material

meshMaterial = new BABYLON.StandardMaterial(“Oak”, scene);
meshMaterial.diffuseTexture = new BABYLON.Texture(“Meshes/Textures/ash-003-4096-512.jpg”, scene);

If I create a box using BABYLON.MeshBuilder.CreateBox and set the material, I can see it.

I call BABYLON.SceneLoader.ImportMesh to import a glb file and in the onSuccess callback, I try to apply the same material. I know the meshes are in an array and apply the material

meshes[1].material = meshMaterial

However, the mesh vanishes. I can still see the other meshes in the scene, but obviously I am not applying the material correctly.

I must be doing something stupid. Somebody tell me what is it?

By the way, the model is created in 3D Studio Max and exported using the Babylon plugin. In 3DS, the model has a UV map which I applied the same material to for testing.

Cheers,

Paul

2

Hi and welcome!

From first glance it seems like you are doing everything wrong, but there are a few open questions -

  1. Is the texture loaded correctly? I mean network-wise, is the jpg file loaded when you create the texture?
  2. Are you sure you are applying the material to the right mesh? It is obviously not meshes[0], I am just wondering regarding the loaded mesh’s structure.

It would be wonderful to have this reproduced in the playground so we can analyze this and give a better answer.

3

It does load. Here is the code snippet. The material is applied correctly for the box and if I don’t try and change the material, the model displays correctly with the materials the glb came with,

I will have a look at the playground, I haven’t used it before.

    meshMaterial = new BABYLON.StandardMaterial("Oak", scene);

    meshMaterial.diffuseTexture = new BABYLON.Texture("Meshes/Textures/ash-003-4096-512.jpg", scene);

    const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

    box.material = meshMaterial;

    BABYLON.SceneLoader.ImportMesh("", "Meshes/", "3DoorFolding_RH_3285.glb", scene,

        function (meshes: BABYLON.AbstractMesh[]) {

            scene.debugLayer.show(); 

            meshes[1].position.x = 0;
            meshes[2].position.x = 0;
            meshes[3].position.x = 0;
            meshes[4].position.x = 0;

            meshes[1].material = meshMaterial; 
        }
    );
5

Finally figured it. Here’s the issue in action.

If you remove the line where the material is assigned to meshes[1], you will see the mesh appear.

6

I can see now that the glb loads with a PBRMaterial for each mesh whereas I am creating a StandardMaterial. I am looking at using PBRMaterial and can find emissive and bumptexture settings but cannot figure out how to set the diffuse image.

But switching back to StandardMaterial and setting useVertexColours = false on the mesh, and now the material is being applied. Odd.

7

Your mesh has vertex colors and the vertex colors are transparent (ie, they have alpha = 0)
Hence your mesh is rendered as fully transparent

PBR and standard material do not work the same way with transparency
PBR will use the transparency mode option to determine if they consider alpha or not:
image

Standard Material does not use that property and simply check if the vertex colors contain alpha

but to your initial problem, diffuse in PBR world is named albedo:

meshes[1].material.albedoTexture = meshMaterial.diffuseTexture