How to realize Panning on the X,Z-Plane with the ArcRotateCamera?

Questions
1

Hello,
I have a Question about Panning with the ArcRotate Camera.

The behavior I want to achieve can be seen here:
http://3dit.bordeaux.inria.fr/testbed.html#navigation_Map_Navigation

I’d describe this as the default RTS camera behavior.

After some testing I have gotten panning along the x,z direction to somewhat work here:
https://www.babylonjs-playground.com/#G8XP3Q#1

with camera.panningAxis=new BABYLON.Vector3(1,0,1); doing the bulk of the work.

There are 2 Problems however:

  1. This does not work on the preview branch. It simply zooms instead of panning along z.
    Comparing the Preview and master branches I think this is due to the omission of one block:
    ArcRotateCamera Preview
    ArcRotateCamera in master
    The block in questions:

    if (!this.panningAxis.y) {
    this._transformedDirection.y = 0;
    }

  2. While Panning in X Direction works, panning in Z Direction scales with the Beta of the camera.
    When looking straight down on the scene it basically cant be moved in Z Direction at all, while at ground-level it moves very fast. Ideally this movement would have the same speed as in the X-Direction.

Any Help is much appreciated.

3

Sadly both those examples use
camera.panningAxis=new BABYLON.Vector3(1,1,0);
which just pans on the x,y axis and is from what i can tell the default behavior as removing the line doesn’t change anything.

When looking just for examples that set panningAxis i did find some examples for the usage with a Vector3(1,0,1), however(with the exception of those that don’t run at all) all of those show the exact same problematic behavior and difference between Versions 5.0 and 4.2.
Some examples of what I mean:
https://playground.babylonjs.com/#165IV6#176
https://playground.babylonjs.com/#3LUF8Y#0

Zooms in 5.0 and pans in the same clunky way in 4.2 as described in the original post.

Thank you for your Help though. Playground search was very helpful in finding out if others encounter the same problem.

6

Thank you again for the help. I have done some testing, and it seems that i will need to find a modifier to make sure that the camera target displacement is correct for the z axis from the view of the camera.
I’m still unsure about the difference in version 4.2 and 5.0 but i maybe the old behavior was bugged.
If I do figure it out ill post a solution here.

7

@PolygonalSun Can you have a look ?

8

Yeah, I can take a look

11

Sorry about the delay but based on what I’m seeing and what I’ve talked with the team about, the camera should be working as intended (using the camera’s local space) in 5.0. To emulate the camera behavior in the original example provided, the camera would have to move in a projected form of world space.

What I mean by this is that the camera would have to move around the x and z axes, with no change to the y-axis. Local Camera space would still need to be taken into account so that when you move the mouse in a direction, the camera moves relative to that movement (eg. mouse moves left, camera moves left regardless of the direction it’s facing).

Here’s a basic example of how to accomplish this: X/Z Pan Example | Babylon.js Playground (babylonjs.com)

In this example, we set the panning axis to zeroes so that we don’t pan. Then, we define our own panning behavior and just throw out the Y. This is one way to do it so take it with a grain of salt.

If you want the ArcRotateCamera to have that option for panning, it might make for a good feature to add in a PR. In any case, I hope that this helps.

3 Likes
13

So far this looks exactly like what I was looking for.
It has been a while so ill play around with this solution for a bit to see if works for the weird edge cases i was struggling with before(like looking at the scene from the top for example).

I think this would be a useful feature to to have, ill see if I can write a PR(including giving you credit for the fix/feature of cause).

Anyway, thanks a whole lot for coming to the rescue here.

14

In case this helps anyone else.
To get this working within the camera, and with the smoothed movement over the plane you can do the following:

export class ArcRotateCamera_fixedpan extends ArcRotateCamera{
    public _checkInputs(): void {
/*... */
            this._localDirection.copyFromFloats(this.inertialPanningX, this.inertialPanningY, this.inertialPanningY);
            // this._localDirection.multiplyInPlace(this.panningAxis); //commend out this line
            this._viewMatrix.invertToRef(this._cameraTransformMatrix);
 /*... */

in version 4.2 this works as it basically just does what the solution to this topic does, but within the camera class.
Don’t think it qualifies for a PR especially since its not version 5.0.

1 Like