Drag behaviour in multiple transform nodes

Questions
1

I am trying to achieve a sizing box in babylon and was wondering if someone could put me on the right track. I basically have a model, and a set of corner boxes attached;

widget
widget720Ă—741 72.7 KB

there is a transform node in the model and each corner set of pink boxes has its own transform node. When the user drags the pink box it moves along the plane it is restricted to - so it only resizes in x or y or z but not freely.

This works well - until I rotate the model. then the dragging goes all over the place.

I am currently have;
meshDragBehavior.moveAttached = false;

and I move the meshes parent in the dragBehaviour handler with the delta of the move (the parent it the transform node for the set of corner boxes) so all the boxes in that corner move together;

meshDragBehavior.onDragObservable.add((event)=>{
mesh.parent.position.x += event.delta._x;
mesh.parent.position.y += event.delta._y;
mesh.parent.position.z += event.delta._z;
}

I think when I rotate the main transformNode (parent to all the corner transform nodes) the event.delta is in some local coordinates…or maybe the world coordinates… and I need to convert it to reference the coord system of the right transform node…

But I don’t know where to start on this.

How do I do this or is there a better way to do it?

2

I havn’t tested it, but what I can think of would be to temporarily clone event.delta and use rotateByQuaternion() to rotate it according to mesh rotation so you get absolute delta:

var tmpVec = event.delta.clone()
tmpVec.rotateByQuaternion(mesh.parent.rotation.toQuaternion()) // or if you use it then rotationQuaternion
mesh.parent.position.addInPlace(tmpVec)
3

rotateByQuaternion doesn’t seem to exist, so I used applyRotationQuaternion instead - I hope that is equivalent?

But this still has the same problem - works great without rotation, but things go off in the opposite direction and off on various tangents when a rotation is applied to the parent transformNode.

It sounds right though…

4

Ops it was rotationByQuaternionToRef.

So it would look like this:

var tmpVec
event.delta.rotateByQuaternionToRef(mesh.parent.rotation.toQuaternion(), tmpVec) // or if you use it then rotationQuaternion
mesh.parent.position.addInPlace(tmpVec)

A different approach might be to use Gizmos, which do most work for you:

1 Like
5

Yeah same problem. The gizmo doesn’t work for me because I think its scaling not sizing. Basically I tried it already and it didn’t do what I want.

Now I’m trying to recreate the same behaviour as the standard mesh drag but with;
meshDragBehavior.moveAttached = false;
and making the calcs myself - but I can’t even do that :frowning:

6

Figured it out - we were so close!

The key was to invert the rotation;

      var tmpVec = event.delta.clone();
      let rot = mesh.parent.parent.rotation.clone();
      let qrot = rot.toQuaternion();
      qrot.invertInPlace();
      tmpVec.applyRotationQuaternionInPlace(qrot);
      mesh.parent.position.addInPlace(tmpVec);
3 Likes
7

Thanks for the help!

1 Like
8

Ah I see, it seems I missed to invert rotationQuaternion.