Material cannot assign through iteration(for-loop)

Questions
, ,
1

Hi guys. I’m trying to make another configurator with Babylonjs scripts and this time I am trying to assign meshes with different materials respectively. I attempt to do it by introducing several for-loop functions. But I got struck when I was trying to assign the material from the created material list back to the mesh from the created mesh list. I do some simple test later by no introducing iteration in import mesh (use meshes[0].material = pbr_material_list[0]) I cannot assign the materials to the meshes still.
Is there anyone can help me to solve this small problem?(I need to make sure I can do it before moving to the next steps) Many thanks for that!
Below is my code

window.addEventListener("DOMContentLoaded", function() {
    var canvas = document.getElementById("canvas");
    var engine = new BABYLON.Engine(canvas, true);

    var createScene = function() {
        var ar = [];
        ar.push("Heather_knitFab_col_1.jpg");
        ar.push("Heather_knitFab_col_2.jpg");
        ar.push("Heather_knitFab_col_3.jpg");
        ar.push("Heather_knitFab_col_4.jpg");
        ar.push("Heather_knitFab_col_5.jpg");
        ar.push("Heather_knitFab_col_6.jpg");
        ar.push("Heather_knitFab_col_7.jpg");
        ar.push("Heather_knitFab_col_8.jpg");
        ar.push("Heather_knitFab_col_9.jpg");
        ar.push("Heather_knitFab_mtl.jpg");
        if (ar.length > 8) {
            var index = ar.indexOf(ar[ar.length]);
            ar.splice(index, 1);
        }
        var pbr_list = [];
        var texture_list = [];
        for (v = 0; v < ar.length; v++) {
            var texture = new BABYLON.Texture("https://bigbetchannel.com/~kayla/Fabric/" + ar[v], scene, true, false, 2);
            texture_list.push(texture);
            var pbr_mat = new BABYLON.PBRMaterial("pbr_mat" + v, scene);
            pbr_list.push(pbr_mat);
            pbr_list[v].albedoTexture = texture_list[v];
        }

        BABYLON.SceneLoader.ImportMesh("", "https://bigbetchannel.com/~kayla/test/", "untitled.glb", scene, function(meshes) {
            scene.createDefaultCamera(true, true, true);
            let test = meshes[1];
            let test2 = meshes[2];
            test.material = pbr_list[1];
            test2.material = pbr_list[2];
        }, null, null, ".glb")
        
          return scene;
    }
    var scene = createScene();
    engine.runRenderLoop(function() {
        scene.render();
    })
});

image
image1920×806 51.4 KB

2

Can you share a playground? also can you check in the inspector the result of your scene?

3

getting the meshes by indices might be the issue here also, materials for gltf have some special setup about sideOrientation and such so a playground would help here to understand what is wrong.

4

Hi @Cedric @sebavan
I tried to put the coding in background. But It seems not showing up correctly as it seems.
https://www.babylonjs-playground.com/#93SSXE#1

I also have put the scripts into the domain so that you guys can take a look at the scene.
https://bigbetchannel.com/~kayla/test/

5

Hi guys, I can do it now when I further my next step(I introduce drag and drop functions ). My initial idea is to drag and drop different materials into the meshes.

So no worries.

1 Like