ArcRotateCamera / make it shift on the Y axis instead of panning

As I couln’t find a topic that goes directly in that direction I am creating a new topic.

I use the ArcRotateCamera to rotate around an object. I found this useful function to lock the panning to one or multiple axis.

If you set the panningAxis to Vector3(1, 0, 1) the camera target shifts around on the ground plane which I would expect. You could say it pans around the world X/Z axis. But when you look at the scene from the top it limits the panning to the local X axis of the camera. Seems like some kind of gimbal lock to me.
https://www.babylonjs-playground.com/#R5146Q

If you set the panningAxis to Vector3(0, 1, 0) it just shifts on the camera Y axis and not on the world Y axis.
https://www.babylonjs-playground.com/#R5146Q#1

The behavior I want to achieve is something like this:
https://www.babylonjs-playground.com/#R5146Q#2
I attached a pointerDragBehavior to a box which is the parent of the camera. Of course it reacts to the wrong mouse button and only when you drag the box itself but it moves the camera on the world Y axis. The controls are not usable for a project as the camera is dragged with the cube (I can’t explain it well. You will see if you try it).

Any idea on how to achieve the camera movement on the world Y axis in a more practical way? Ideally with something like the panningDistanceLimit of the ArcRotateCamera.

Hi GreyWorks,

Sorry, I’m not sure I really understand the effect you’re trying to achieve. It’s very possible to write your own custom camera controls (here’s an example); but to discuss in more detail here, I’ll probably need some more help understanding what the objective is. Specifically, the questions I have in mind are the following:

  • What do you want to happen when the user click and drags up/down on the screen? Do you want the camera to rotate, translate, or some other behavior I haven’t thought of?
  • Is there an object you want the camera to follow, or should it act on its own?
  • Do you want the camera to be locked to one side of the object? (Trying to understand how panningDistanceLimit fits into the picture.)

Thanks!

2 Likes

Hi syntheticmagus,

thanks for your reply! You might have pointed me in the right direction here. I will investigate the custom camera controls on monday.

Maybe my explanation was a bit off. In my case I want the target of the camera to move only on the world Y axis so the center of rotation is moved.

Mapped to your questions:

  • On right drag the target of the camera should be moved on the world Y axis as stated above. This would move the center of rotation of the ArcRotateCamera.
  • The camera should be fixed on an object. My goal is to to be able to move the camera along the height of the object. So the target would be limited on the Y axis to be within the object.
  • The camera should be able to rotate around the object. The center of rotation (-> target of the camera) should be restrained to the Y axis so it can move on the points on (0, Y, 0).

If i can’t figure it out next week i will provide a better expample :slight_smile:

1 Like

Okay, interesting. Is this along the lines of what you were looking for?

https://www.babylonjs-playground.com/#R15Z8U

I threw together some custom controls from scratch as that seemed like the cleanest way to get something fully customize-able. Most of the parameters of the movement can be controlled using the constants at the top of the Playground, including sensitivities and defaults. I didn’t add inertia, but you easily could; the “Spherical Panning” example I linked to above illustrates a way to do that using related techniques. Again, still not 100% sure I’ve correctly understood what you’re going for, but hopefully this is at least a little helpful. :upside_down_face:

Here is a gif of what it looks like right now.

Just a quick heads up as I saw that this is still relevant :slight_smile:
Last week I updated the code for the controls to the updated control scheme of ArcRotateCameraPointersInput.
It is much easier to understand now and I think the implementation is better.

It replaces the old ArcRotateCameraPointersInput completely so the following code is needed instead of just adding the input on top:

camera.inputs.removeByType('ArcRotateCameraPointersInput');
camera.inputs.add(new ArcRotateCameraSlideInput());

Aside from that it does exactly the same :slight_smile:
The new code can be found in the gist from before: Babylon Arc Rotate Camera Slide Input · GitHub