For loop with sceneloader.importmesh

Questions
1

I am trying to import multiple meshes at different positions, using a for loop to go through a json that I have , however the problem I am coming across is that all the meshes get loaded on the one spot.

i have done this for making indiviual meshes and it seems to work

var wallFlip = true;
        var counter = 0;
        for(var i = 0; i < imageArray.length; i++){
            var canvasImage = new BABYLON.StandardMaterial("canvasImages", scene);
            canvasImage.diffuseTexture = new BABYLON.Texture(imageArray[i].relativePathNormal, scene); //
            canvasImage.specularTexture = new BABYLON.Texture(imageArray[i].relativePathNormal, scene); //
            canvasImage.emissiveTexture = new BABYLON.Texture(imageArray[i].relativePathNormal, scene);
            if (wallFlip) {
                //canvas on wall
                var pictureCanvas = BABYLON.MeshBuilder.CreatePlane("wall", {height: 2, width: 3},scene);
                pictureCanvas.position = new BABYLON.Vector3(-7.2,1.5,((-(25 *(imageArray.length / 2)))+4+(5 * counter)));// need to change th values
                pictureCanvas.rotation = new BABYLON.Vector3(0,-Math.PI/2,0);
                pictureCanvas.material = canvasImage;
                wallFlip = false;
            } else if (wallFlip == false) {
                //canvas on the wall
                var pictureCanvas = BABYLON.MeshBuilder.CreatePlane("wall", {height: 2, width: 3},scene);
                pictureCanvas.position = new BABYLON.Vector3(7.2,1.5,((-(25 *(imageArray.length / 2)))+4+(5 * counter)));// need to change the values
                pictureCanvas.rotation = new BABYLON.Vector3(0,Math.PI/2,0);
                pictureCanvas.material = canvasImage;
                wallFlip = true;
                counter++;
            }
        }

this works perfectly fine, however when I try to make it work with sceneloader.importmesh it does not seem to work.

for(var i = 0; i < modelArray.length; i++){
            // try { // this needs work
            var holder = BABYLON.MeshBuilder.CreateBox("wall", {height: 1, width: 1, depth: 1},scene);
            holder.isVisable = false;
            holder.position = new BABYLON.Vector3(0,0,(-(10 *(imageArray.length / 2) + (10 * i))));
            BABYLON.SceneLoader.ImportMeshAsync("", modelArray[i].seperatePath, modelArray[i].fileName, scene).then((model) => { 
                const root = model.meshes[0];;
                const body = root;
                body.parent = holder;   
                return {
                    mesh: holder
                }
            });
            

        }

i have tried multiple ways to try and do this, but nothing seems to work, i have tried doing it inside the scene loader also by giving them a position based on the for loop but it does not seem to make them load in different spots

thanks for any help

2

Hi. You don’t return mesh. You always return loaded scene root node. So you need return model from .then((model) callback Babylon.js Playground

1 Like
3

Use a let i instead of var i in your for loop :slight_smile:

1 Like
4

Thanks for the help, the let make it work, and had to mess with the code ever so slightly.
The final code was:

for(let i = 0; i < modelArray.length; i++){

            var holder = BABYLON.MeshBuilder.CreateBox("wall", {height: 1, width: 1, depth: 1},scene);
            holder.isVisable = false;

            BABYLON.SceneLoader.ImportMeshAsync("", modelArray[i].seperatePath, modelArray[i].fileName, scene).then((model) => { 
                const root = model.meshes[0];
                const body = root;
                body.parent = holder;   
                body.position = new BABYLON.Vector3(0,0,(-(10 *(imageArray.length / 2) + (30 * i))));
            });
        }

i had the holder, be an anchor and then move the meshes around the anchor, rather than moving the holder itself