Snap and Drag Mesh on Tubes (or Ray?)

What I need:
While dragging the mesh, if the mesh intersects with a tube, the mesh should snap on the tube… and then continue dragging along the tube.

My idea was to calculate the ray for each tube (from start to end) and then associate the Ray on PointerDragBehavior.

What I have:
I started doing this here https://www.babylonjs-playground.com/#PFYKFU#1 but I have no idea how to force the box to be dragged on the rays inside the onDragObservable.

I though its possible to do with startDrag PointerDragBehavior - Babylon.js Documentation

But it seems that I cant run that inside the Observable?

Is this the wrong strategy and is there a better way?

Update: https://www.babylonjs-playground.com/#PFYKFU#2

I thought if I first rotate the box, then I can use its local axis to move it left/right on the same axis as the tube.

I am having some problems though:

  • The box is too far away from my cursor
  • There seems to be a problem with the angles because on many tubes its facing the opposite rotation.
  • How do I choose the local axis and how do I move the mesh based on the local axis?
  • How can I always keep it snapped on the tubes?
  • If a tube is close to another tube, the box rotation is buggy and keep rotating in a weird recursive way.

@JohnK thoughts? I tried using the angle direction to check if the angle was positive/negative but it didnt quite work on my local code.

Update. I found a way to snap the windows on the walls, but havent implemented it fully in my code.

Now I just need to fix the angles which I am not sure where the problem is exactly.

Love your dev log :slight_smile: