Stack up elements on fixed locations (drag&drop, snap, ...)


i’m trying to built a very simple webshop that contains a product-configurator.
A customer should be able to stack a variable number of cylinders on a plate.

This plate has two fixed locations where cylinders can be put on. So i guess i would need something like a grid. He should then be able to spawn new cylinders on a button press and stack them on top of each other using drag & drop.

Heres an example, of what a finished product might look like:

It’s my first time using Babylon and i’m kinda lost at the moment, tho i’m impressed with many of the other projects that i’ve seen so far, and i think its suitable for our needs.

Are there any tutorials / tips how to start with my specific problem?

I appreciate any help :slightly_smiling_face:

Best, Niklas

Hi @Tarrew and welcome to the forum. These may be of help
Interact with a Scene - Babylon.js Documentation


Hi @JohnK,

thanks alot, i’ll look into that, and see if i can get it running :slight_smile:

Thanks again, i was able to add Mesh instances when clicking a button and releasing them when the button is pressed again.

I’ll have to research on snapping later to see how this can be accomplished.

In the future, i could like to add the following function:
When i click one of the instances a menu should open that lets me chance the color of the selected cylinder.

I saw you could register Action at meshes. But how does this work with mesh instances? I’d have to know, which of my instances of this mesh was clicked. Is it possible?

Thanks alot!

Hey, its me again :smiley:

I made some progress with the snapping now and i am actually able to stack up cylinders now. Quite happy with the result so far:

Now i’m kinda stuck how to click on one of those mesh-instances and interact with it, like open a side-menu and change color.
Is it possible to get a reference to a mesh-instance depending on the position where someone clicked?

Appreciate any help on that :slight_smile:

I’m slowly becoming more familiar with the API. So i got my stuff working like i wanted to.
Currently looks like this:

Really happy so far with BabylonJS :slight_smile: