Slowed down, brick after brick .... build a wall : setInterval function?


I am working on a project in which I want to lay a brick (primitive box) one after the other in a slow manner to build a wall (to show the good way to build). I tried to use the js setInterval function and include it in the mesh creation loop but it doesn’t work. The construction of the wall is always done all at once. Do you have an idea or is there a Babylon function for this? Thank you in advance. My code :

It’s probably easier to simply create all your meshes at once, then use the mesh.setEnabled() function to hide/show the meshes whenever you want (disable them all at creation time, then enable them one by one with the setInterval function).


build all the bricks first invisible and push them to the bric array.

then create the setInterval outsite the for loop with:

let index = 0;
let interval = setInterval( ....
  if (index > bric.length -1) {

  bric[index].isVisible = true;
), 6000);

Try something like this…

var maxBricks = 20;
var bricksLaid = 0;

var intervalID = setInterval( function() {
   // create box
   // set position
   // set material

   if (bricksLaid===maxBricks) clearInterval(intervalID);
}, 6000);

What your code is doing is just immediately creating 19 timeouts that all fire after 6 seconds. The point being that setInterval does not “stop the flow of the code for 6 seconds”.


Or use an expandable SPS and add particles (bricks) on demand : Solid Particle System - Babylon.js Documentation

1 Like

And don’t miss my world famous move/spin/scale/color E-Z-Ease animators… for stacking them bricks. (Lines 2-50)

Lines 121 - 138 is the “time-line script”. Servo/Actuator movements… are the heart of “Brick-Stacking Robot” v1.0. :slight_smile: The calls to the animators… don’t NEED to run via time. They could be called by a “brick wall manager” :slight_smile: It could use ray-casting and fancy sensors… to “read” the current wall structure, and know where/how the NEXT brick should be stacked.

That way, you can stop it in the middle of a wall, and later start it again, and it will know how to continue building. FANCY!

Maybe for beginning, just make brick, scale brick, turn brick, and then move brick… to “next brick position”. Later, we can give the robot a single instruction… robot.createWhateverYouWish("it", {symmetrical: true, maxBricks: 5001}, scene); hehe. FUN!

Note: Those 8 little mesh-overload BABYLON.Animation.CreateAndStartAnimation() functions… currently DO NOT have an onAnimationEnded function, but I think you can add the function, or the name of a declared function… right at the end of the line… just after the ease parameter. For my goofy experiments, I didn’t need to monitor for anim endings. I just allowed lots of time. :slight_smile:

And feel free to heavily modify those 8 funcs… so they do whatever you wish them to do. They are just experiments with BJS cool CreateAndStartAnimation… which auto-senses what dataType you want to animate, so YOU don’t have to set that… in its params. Too cool, huh? CreateAndStart completely rocks… I love it.

Thank you very much for all your replies ! …I’m going to
try all of these pieces of code, and I will comment on my experience …

1 Like

Thank you Joseph … (and other dev too !) … It works well.
I have to say i have some diffculties to understand this JS syntax "if (bricksLaid===maxBricks) clearInterval(intervalID);
}, 6000);" … but my code teacher, js specialist, will explain it to me this noon … Thank you again.
Pierre (junior developper)

1 Like