Collision and "attachment points"

Ciao, I’m a new developer of BabylonJS, but my goal in the end is quite specific. I would like to create an environment where the customer can insert many kind of objects and arrange them in a correct way, so that there’re no collision bewteen them and maybe, if possible, define for each object some “attachment points” where the objects are contrainted to be connected, in order to help the customer to arrange the items correctly. Can you give me the right starting point on BabylonJS in order to achieve this kind of application?

Thank you for your help


1 Like

Adding @PirateJC to help with this :slight_smile:

1 Like

Well first, welcome to the Babylon Family! It’s genuinely great to have you here.

Is there anything more you can tell us about the types of objects that people will be “connecting.”

There are essentially 2 different questions here:

  1. Can you ensure that objects that are added to a scene do not intersect one another? This is probably most easily done by using the bounding box capabilities in Babylon.js.
    Here’s some info to get you started on that: Drawing Bounding Boxes | Babylon.js Documentation

  2. Attachment points is a much more complicated question to answer without more knowledge about the types of objects that will be added to the scene. If it were me I would probably think about this in the design and creation of the 3D objects. If you can design them in a way where there specific attachment points in the model itself, that would probably be the easiest place to start. Perhaps a parented invisible joint or object that you could attach other objects to? This is the route I’d probably start to explore first.

Now luckily, @Krishna_Kishore just posted an incredible demo of a modular sofa system that looks like it might answer both of the issues you’re inquiring about.

@Krishna_Kishore, would you be willing to share some techniques you used here to help @Toni_Bruno?


Coincidently Jason answered at the same time I was working on a quick demo of how I’d approach this :laughing:

I think the invisible object would definitely be a good example to start. In my playground, I used the green box as the attachment point (of course, this would be invisible in an actual aplication, but it’s easier to explain the idea when it’s visible).

When I click the yellow box and start dragging on the x direction, I keep track of what are going to be the future bounds of the object and compare them to the green box’s bounds. If they overlap, then I “snap” the yellow box to a fixed position and stop the dragging behaviour. The green box is slightly bigger than the red box because having such a “breather space” in intersections usually lead to better experience for the user.


Thank you, I will try to check the solutions provided!