Correct way to add/remove meshes from a scene on click

Sorry, i dont have a playground, and VERY new to babylon.

for starters, my game is sort of like a wack-a-mole game, where there are multiple meshes floating around, and you can click them, you get more time/points for clicking the good ones, and lose time/points for clicking the bad ones. and every time you click one, it should remove the one you clicked and re-spawn a new one.

I am currently using an asset manager to create multiple meshes from glb files. I created a function that takes in the glb info, and a number of instances needed. so once the assetManager loads the model, i create a give number of instances. Each of these instances also has animations and an onclick trigger.

right now on click i ->run an animation ->call instance.dispose() → and then call my create function again with only 1 total instance to add another mesh to the scene.

trick is, every time i dispose/create a new instance, my scene is refreshing (ie, the background goes black and i see the babylon loader)

im thinking possibly because my create() function calls this every time?

const meshTask = assetsManager.addMeshTask(name, “”, “/models/”, url);

is there a better/correct way to add/remove?

You can add instances once and hide/show them when necessary. check mesh enabled property like in the PG:

2 Likes