Auto sticking meshes when they are close


This is my playground:

  1. How to create auto sticking when meshes are close to each other. (I tried to do it with raycaster)
  2. Auto rotate mesh to backside when it is close to wall.

I will be very pleasant if someone helps!

Hello! We had a similar question a while ago, it might help you: Collision and “attachment points” - Questions - Babylon.js (


Okay, thank you. That’s very helpful. But if i want to move by the x and z axis. How can i attach it? And if they are already sticked. How can i separate it on move back?

I rewrote the scene into my needs. Now it looks like -

But i cannot understand how to make it work from both side + from both meshes.

The idea for the z axis would be the same as the x axis, check if the z position of the box is “inside” the attachment area, and if both x and z positions are inside, then attach the box. For separating, I’d check if the position I’m dragging to is “outside” the attachment area, and if it is, move the box to there.

1 Like

Okay. For Z i understood how to do it. But it only works for first time when i’m dragging yellow box to red. If i move red box at first it takes bad position. May be i calculate bounding box incorrect?

Thank you for your time!

That’s correct, it was a bounding box issue! The code was using boundingBox.minimum, which returns the minimum position of the bounding box in local space, which doesn’t change based on the position of the object (for the box with width 1, its local space is centered in the origin, so the minimum x will be -0.5). To get the minimum position the box occupies in world space, we need boundingBox.minimumWorld. And since the boxes can attach from either side, we need to take into account both the minimum and maximum positions of the bounding box, and move our box to the closest of them. A demo with those changes follows: Movement with attach points | Babylon.js Playground (


This is pretty good. Thank you for your help!

But can u help with one more feature, because i have no idea how to do it. I need the alignment by the second one axis. If it is close to edge, I need to align two boxes into one line.

For the “second axis”, do you mean the z-axis? If so, you’ll probably only need to repeat the checks for that axis. :smiley:

Yes, that’s what i meaned. But i need to check only by edges. If edges are close to each other alignment should be applied.

If I understand correctly, if i’ll check by the same method, it will only stick to the top and to the bottom.

I think I understand! You want to be able to attach the meshes from all sides, correct? I took a try at this here: Movement with attach points | Babylon.js Playground (

Now, instead of just checking the minimum and maximum x positions, I also check their combinations with the z min and max too. I drew these spheres as a way to show where are all the possible attachment points, I find that looking at these visual guides helps me a lot while programming. :smiley:


Thanks a lot. There are some difference with my mind but I will try to finish it by myself :slight_smile:


There is mesh Surface Magnetism behavior - SurfaceMagnetismBehavior | Babylon.js Documentation
But I still didn’t see any example how it works

1 Like

This is currently only used internally by our 3dGui. Let s see if @CraigFeldspar could provide more info.

1 Like

It was meant to be used internally with Babylon Native and the Hololens 2, but I see no reason why it wouldn’t work.

Simply instanciate this behavior, attach it to the mesh you want to stick to geometry, and fill the .meshes field of the behaviors with your colliders.

I have set up a playground as a demo :

But from what I read above, this is probably not what you expect in your case


Hello everyone,

I know this is an old post, but very relevant to @danya_rnd and not just him. I found an old PG from old forum

Here you will find everything to start with. There is definitely room for improvement, whereas everyone needs to adapt differently to their own needs.

Good luck to everyone

1 Like