How can i optimize the creation of meshes? - babylonjs

Question

I've added a functionality that let's you create meshes when you click on the ground. But for some reason when I walk near the mesh the browser lags a lot. It doesnt't happen with the meshes I make when i create the scene.
This is how i create the object
scene.registerBeforeRender(function () {
window.addEventListener("click", function (evt) {
var pickResult = scene.pick(evt.clientX, evt.clientY, evt.clientZ);
if (pickResult.hit) {
createBlock(pickResult.pickedPoint.x, pickResult.pickedPoint.y, pickResult.pickedPoint.z);
}
});
});
function createBlock(x, y, z) {
var box = BABYLON.MeshBuilder.CreateBox("box", { height: 3, width: 3, depth: 3 }, scene);
box.position.x = x;
box.position.y = y + 1;
box.position.z = z;
box.checkCollisions = true;
}
I believe It's something related to the onClick event as I tried the same method on a keyPush event and it works just fine

Answer 1

I have just found out. I deleted
scene.registerBeforeRender(function () {
and now it works fine

Answer 2

Just my two cents for this -
The reason it lagged is because you registered a click listener after every frame rendered. meaning, technically, 60 callbacks were registered every second. So when you clicked after a few seconds, hundreds of callbacks were called one after the other. No fun :-)
Your solution was the right thing to do - register the click even one time, and execute the box creation when you click.
To save a bit of work, and do it "the babylon way", you could instead do this:
scene.onPointerDown = function (evt, pickResult) {
// if the click hits
if (pickResult.hit) {
// do your thing here
createBlock(pickResult.pickedPoint);
}
};
function createBlock(pickedPosition) {
var box = BABYLON.MeshBuilder.CreateBox("box", { height: 3, width: 3, depth: 3 }, scene);
box.position.copyFrom(pickedPosition);
box.checkCollisions = true;
}
This way babylon takes care of handling the event registration for you, so pick and touch events are also registered (and not only clicks). It also takes care of removing the event listeners when the scene is disposed.