Arc rotate camera relationship to axes

Questions
1

I am really struggling to understand the arc rotate camera because there is a critical gap in the documentation.

This PG demos the arc rotate camera and allows me to play around with it, but experimenting with the code has just left me more confused.

The problem is that the documentation has a nice picture to show the two axes of rotation, but crucially does not say how this relates to the x, y and z axes in the scene, and I can’t make any sense of it.

For example this PG creates an arc rotate camera like this:

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

Which to me reads as the camera is pointing towards (0,0,0) and is a distance of 10 from this point. It has alpha and beta values of 0, but I have no idea where that places the camera in x, y, z space because it’s not documented.

The PG then goes on to

camera.setPosition(new BABYLON.Vector3(0, 0, -10));

which seems pointless to me since we already positioned the camera in the constructor, but commenting out this line changes the scene entirely. Does setPosition do something different than passing the position to the constructor. Again this is not documented, maybe setPosition is setting the x, y and z position of the camera, but if that’s the case then how can the camera stay 10 away from the target position?

Just a tiny shred of documentation would make a huge difference here. Is there anybody out there who knows how the arc rotate camera works and can supply the missing pieces. Thanks.

2

The Arc Rotate accepts either alpha/beta/radius (a part of the constructor) or a new position, which then calculates this values for you.

The image in the doc:

image
image512×512 43.2 KB

Explains better how alpha, beta and radius correspond to the scene.

At alpha = 0, beta = 0, radius = 10, the camera will look from directly above the scene at a distance of 10 units. You can see the alpha as rotation around the XZ Plane, and the beta as rotation around the plane that is calculated with alpha (which can be referenced as the local camera YZ plane?).

So, for example, setting alpha = 0 and beta = Math.PI / 2 (90 degrees) , will make you see the scene from “the side” at alpha = 0. At alpha = 0 (and target 0,0,0), the camera will look towards the negative X. So the position in that case will be 10, 0, 0. At alpha = Math.PI (or, the same, -Math.PI), the position will be -10, 0 0.

Setting the position to 0, 0, -10 will recalculate the alpha and beta to - -Math.PI/2 and Math.PI/2 respectively. Radius will stay the same, until you change the length of the vector

Does this make better sense now?

3

Actually does not at all explain how alpha, beta and radius correspond to the scene, and this was my original problem. It only depicts how alpha, beta and radius relate to each other. Adding x, y and z axes to this diagram would enable the reader to understand how alpha, beta and radius correspond to the scene.

Your description of “alpha as rotation around the XZ Plane” is somewhat helpful, but I don’t understand what you mean by “beta as rotation around the plane that is calculated with alpha”.

To provide some context, my scene has a ground plane in X and Z with Y being the height of the ground. I want the arc rotate camera to look down at the ground from the sky (which it is currently doing) and move across the ground when I move it (not panning). What I am experiencing so far is that the camera moves across the ground in one direction, but the other direction rotates the whole map. It seems like the camera is not aligned with the right axes, but the diagram in the docs does not provide any clues as to how the alpha and beta angles relate to the x, y and z axes.

4

Some new information after this evening’s playing around. There is an upVector property.
This line makes my camera rotate around the correct axes:

camera.upVector = new BABYLON.Vector3(1, 0, 0);

But this brings out a new problem; the alpha and beta properties that I set in Javascript are reflected in the debugger, but do NOT match what is shown in the Object Inspector. The Object inspector values make sense, and when I set them in the Object Inspector to the values that make sense to me, I get the view I was expecting, but setting the same values in these properties in Javascript produces a very different result.

Some transformation is taking place that is making it hard to work out what values to set for alpha and beta, but at least I made some progress, in that the camera does now scroll over the ground in both directions.

6

What I’m doing when I use an arc rotate camera is that I always set alpha = -Math.PI/2 and beta = Math.PI/2 in the constructor.

With this configuration, it’s easier to know what’s going on: the radius is simply the (negative) z value of the position. So, if you use radius = 10, the position of the camera will be (0, 0, -10).

In the picture linked by @RaananW, the +X axis is the blue line going to “alpha = 0”, +Y axis is the blue line going to “beta = 0” and the +Z axis is going from “target” to “alpha=PI/2, beta=PI/2”.

Well, setPosition is indeed setting the position :wink:

Why would you want the camera to stay 10 away from the target position? The alpha/beta/radius you set at start are used to set the starting camera position, but you are free to change this position afterwards either by updating alpha/beta/radius or by calling setPosition: by default the arc rotate camera is not constrained so these parameters are free to change.

1 Like
7

Maybe this will help:

You can see that we are rebuilding the alpha, beta and radius based on the new position:

8

This part is very helpful. It lets me figure out how to reverse the transformation that is applied when setting the position of the camera.

Thank you.

9

Of course it is obvious that setPosition sets the position, but it’s not at all obvious that it sets the position in x, y, z coordinate space rather then alpha, beta, radius space. I tried calling setPosition with both x, y and z and also with alpha, beta and radius to figure out which it is, but neither produce the expected result after setting the upVector

10

If I set a breakpoint after these lines of code

const camera = new BABYLON.ArcRotateCamera(
   "orbitalCamera",  0, 0, 0, new BABYLON.Vector3(0, 0, 0),
   scene, true);
camera.upVector = new BABYLON.Vector3(0, 0, 1);
camera.setPosition(0, 200, 0);

and inspect the camera, I see that alpha, beta and radius are all NaN and position is undefined.
This looks like a bug to me.

11

The problem is not upVector, it is the call to setPosition that is expecting a Vector3, not 3 floats.

1 Like
12

I made this PG to help people to understand the relationship between the arc rotate camera and the scene. In this PG you can set the upVector to align with one of the axes and it will draw the alpha and beta circles in the correct planes.

13

Hello Bikeman! Nice graphic explanation…

I 'am trying to change the keyboards controls for this camera. I tried to use the UP ARROW KEY and the DOWN ARROW KEY for zooming… Instead of Rotating one of the axis. (the same feature that is active when we press the ALT key.

Do you know if that is possible? can you help me on that. .All the examples that i Found are using the Free camera.

Cheers!

14

Hey Laureano, thanks for the feedback, always nice to know when something I did helped someone else.
I am pretty new to Babylon (3-4 months) and still struggle with lots of things myself.
Customizing inputs is something I struggled with too. One option is to forget about attaching input controllers to the camera, just capture the keyboard events you want and modify the properties of the camera directly.

15

you can use
camera.inputs.remove(camera.inputs.attached.mousewheel);
for disable all arcrotate zoom event and manage that by your self