Arc rotate camera panning on button click

Hi guys,

for my current project I am using the arc rotate camera and I want to implement some navigation buttons to move the camera in my scene.
First I started to move the camera along the axes, but this only works well until i turn my mesh a little bit.
So I thought about the right click panning feature.
Is there a possibility to use panning on a buttonclick?
For example I click on the “move right” button and the camera pans to the right ( based on my view on the screen)?

Thanks for your help!

Panning is simply about moving the camera position and target simultaneously :smiley:

So it should be pretty easy. If you struggle to do it, please create a repro of what you have in the playground and we will make it work

The panning itself is not the problem. Like you said, I am able to move the camera through moving its position and its target. The problem is more about the coordinate system I should use by performing this action. Independent from the rotation of my target mesh, I want to move right by clicking my “Move right” button. Thats currently not the case, because I am performing the moving with a addition to e.g. the x axis position of the camera. But if i turn my mesh/ move the camera around the mesh for 180°, this addition results in a movingt to the left.
So I think I am using currently not the right “reference point”. What I need is a reference to the users point of view and not the world coordinate system.

well then you should do a quick repro in the PG so we can all have a look :slight_smile:

https://www.babylonjs-playground.com/#SRZRWV#380

In this playground here I added a MoveRight Button and tryed to implement the movement.
As long as you dont turn the camera, it will move to the right. But when you turn it, it doesnt work anymore properly due to the fix axes.

Hi CoBry,

I think all you should need to do is just get the vector that points to the right for the local coordinate space of the camera at the time you’re trying to move it, then use that vector to update both the position and the target of the camera. Does this have the behavior you were going for?

https://www.babylonjs-playground.com/#SRZRWV#381

Usually, to get the vector that points to the right, you’d just call .right() on any transform node, but unfortunately cameras don’t have that method. However, you can easily get a rotation matrix from the quaternion rotation of a camera, and there’s a fun trick you can do with rotation matrices: a 3x3 rotation matrix is actually just the basis of the local coordinate space, which means you can get the “right” vector by simply reading the correct values directly out of the rotation matrix. I rewrote your CameraMoveRight() function to use this trick, which hopefully achieves something pretty close to the behavior you were looking for. Hope this helps, and best of luck!

2 Likes

Hi syntheticmagus,

this looks like the right direction!
Can you maybe tell me or give me a link to an explanation, how i figure out which values I have to read for the direction I want to move to?

EDIT: Found an explanation: https://www.3dgep.com/understanding-the-view-matrix/

Thanks alot btw :smiley: