"Google Maps"-like ArcRotateCameraPointersInput

Hello, I am trying to implement a custom ArcRotateCameraPointersInput to behave like Google Maps in both desktop/laptop browser and mobile device. Namely, with a mouse:

  • Primary (usually left) click and drag pans the camera (moves it’s target … or more accurately updates the camera’s _target since using the target setter appears to maintain the camera’s position and change its beta in the process)
  • Secondary (usually right) click and drag rotates the camera around it’s current target (updates the camera’s alpha and beta to keep the pointer “over” a fixed point on the ground plane)

… and with touches:

  • Single-touch and move pans the camera (as with primary click & drag)
  • Two-touches and move (together) “tilts” the camera (updating its beta to keep the center of the two touches “over” a fixed line perpendicular to the camera’s current alpha on the ground plane)
  • Two-touches that pinch or spread zooms the camera out or in respectively (updating its radius … e.g. useNaturalPinchZoom)
  • Two-touches that move around one another rotate the camera (updating its alpha)

I and some of my colleagues were able to get pretty far with a fully custom ICameraInput<ArcRotateCamera> implementation which you can see in this playground, but the targeting goes kinda wild when the pointer input jitters, and it was suggested by @Prodigal that maybe there’s a way to adjust settings on the built-in ArcRotateCameraPointersInput (and that maybe @PolygonalSun would be a good person to tag).

1 Like

Hey @mysterycommand, so I did see some jittery/wild behavior when using the right-click to rotate. On lines 195-199, it looks like you’re adding the difference in angles from your current point and previous point. There is a known issue that I’m currently working on where pointer movements are being processed multiple times which I believe may be the reason for the jitteriness. I should be pushing my fix up this week which will address that. In the meantime, I recommend trying to use something like this.#targetAlpha -= event.movementX / 1000; in place of it. I’ll update when this when the PR is live.

PR is live: DeviceInputSystem: Combine handling of all movement into single Move by PolygonalSun · Pull Request #11915 · BabylonJS/Babylon.js (github.com)

Hello @mysterycommand !

I was working on something like this:

And there is some info in the docs as well:

Maybe it’s something you can use or just have a look at it for fun :slight_smile: Removing the HammerJS dependency is still on my TODO list tho. :roll_eyes:

r. :vulcan_salute:

2 Likes

PR is merged