Three.js & OrbitControls.js - pan camera parallel to ground plane (like Google Earth)

Question

I'm working on a simple Three.js demo that uses OrbitControls.js.

I'd like to change the behavior of panning in OrbitControls. Currently, when you pan the camera, it moves the camera in a plane that is perpendicular to the viewing direction. I'd like to change it so that the camera stays a constant distance from the ground plane and moves parallel to it. Google Earth uses a similar control setup.

Edit: I should have mentioned this detail in the first place, but I'd also like the point where you click and start dragging to remain directly under the cursor throughout the entire drag. There needs to be that solid connection between the mouse movement and what the user expects to happen on the screen. Otherwise, it feels as though I'm 'slipping' when I try to move around the scene.

Can someone give me a high-level explanation of how this might be done (with or without OrbitControls.js)?

Answer 1

EDIT: OrbitControls now supports panning parallel to the "ground plane", and it is the default.

To pan parallel to screen-space (the legacy behavior), set:

controls.screenSpacePanning = true;

Also available is MapControls, which has an API similar to that of Google Earth.

three.js r.94