[Feat] Natural movement using FirstPersonController

[felixpalmer]

Target Use Case

FirstPersonController is hard to use as the camera moves in the precise 3D direction it is facing when scrolling, see example: https://deck.gl/docs/api-reference/core/first-person-view. This makes it easy to go under the floor. Also when the arrow keys are used it is easy to get into a state where either zooming doesn't work or moves in some inexplicable direction.

Proposal

Change the behavior such that the movement when scrolling is restricted to a 2D plane, with the arrow keys providing left/right & up/down panning. This more closely imitates the motion of a human who can turns their head in any direction but moves generally along a flat surface.

In addition, when scrolling the mouse position should act as the focal point, when zooming, the camera should move towards that location (the current implementation moves straight ahead always).

To make these changes, minimal adaptations are required to the FirstPersonState class, but because this isn't public it is hard to extend. Once must copy/paste the entire implementation.

Demo of new behavior here, looking for feedback on how people think this compares to the existing controller:

https://jsfiddle.net/felixp/b5pugcyx/

[chrisgervang]

Really nice behavior. The mouse scroll change is subtle but really makes a difference. I thought the pan mouse controls made a lot of sense too. What do you think about moving forward and backwards with the up/down arrow keys instead of up/down motion? That feels more "natural" to me since it's how first person video games tend to work, but I'm open to hear more perspectives. Great work!

[felixpalmer]

moving forward and backwards with the up/down arrow keys instead of up/down motion

Yes, this is better - I've changed the jsfiddle to use this behavior. I originally had up/down move vertically as there was no panning support, but this is no longer needed due to #8166

[akre54]

@felixpalmer this is awesome. Love to see the progress

Have you seen https://yomotsu.github.io/camera-controls/ ?