Rotate a box left/right and up/down

Questions
1

I am trying to rotate my box - mesh using mouse press and drag when its moving left-right / up-down. But both of these should not happen at same time. That is either it should move left or right when the mouse is moving in the same direction or up/down.

Also, it does not register the last pointer position it should have to rotate the box. How do I solve this?

https://playground.babylonjs.com/#6XIT28#522

2

Well, the answer is somehow in your question already. You will need to define some sort of ‘dead zone’ for either axis depending on context. For this, you will need to capture the pointer down event and set an offset/limit on both axis so the user can slightly move to the left/right or up/down without triggering the move on this axis. To be honest, it would be easier and probably more manageable to have two controls, one for up-down and one for rotate. But your case is totally achievable and has been done before. It will be just tricky to tune it perfectly for all situations and vectors. For registering the last pointer position, I guess you would just need to record that on pointer up. Although here, I’m not too sure here, why you would want to record the pointer position?, but then, I don’t know about your project.

3

I think the problem is that the mesh starts rotation by following the pointer position instead of rotating from the current rotation that it is on.

4

Yes, this is what’s in your script right now: You are acting on all axis same time, following the pointer coordinates. Not to mention the camera is also still active during the handling. But two avoid this you have to either:

  1. account a dead zone for the pointer move, where a slight movement would not be accounted as a request to move the object on either axis
    – OR –
  2. create two distinct controls for moving up and down or right and left
    – OR (most common) –
  3. use a gizmo or create a ‘grab area’ to make a distinction between the pick for rotate or move up/down
1 Like