Three.js & OrbitControls.js - pan the camera parallel to the plane of the earth (for example, Google Earth)

Question

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

I would like to change the panning behavior in OrbitControls. Currently, when panning a camera, the camera moves in a plane perpendicular to the viewing direction. I would like to change it so that the camera remains at a certain distance from the plane of the earth and moves parallel to it. Google Earth uses a similar control setting.

Edit: I should have mentioned this part in the first place, but I would also like the point you click on and start dragging to stay under the cursor during the whole drag. There should be such a strong connection between the movement of the mouse and what the user expects on the screen. Otherwise, it seems to me that I "crawl" when I try to move around the stage.

Can someone give me a detailed explanation of how this can be done (with orbitControls.js or without)?

Answer 1

I get it. Here is an overview:

• Keep the mousedown event somewhere.
• When the mouse moves, get a new mousedown event.
• For each of these points, find the points on the plane where these clicks are located (you will need to place the points in the camera space, transform them into world space, then start the beam from the camera through each point to find their intersections with the plane. This page explains the ray intersection test plane).
• Cross out the point of intersection of a point in world space from the point of intersection of the end of world space to get an offset.
• Subtract this offset from the camera’s target point and you're done!

In the case of OrbitControl.js, the camera always looks at the target point, and its position relative to this point. Therefore, when you change the target, the camera moves with it. Since the target always lies on the plane, the camera moves parallel to this plane (while you are panning).

Answer 2

Some time ago I was working on this problem, that is, I adapted OrbitControls.js to navigate the map.

• Here's the code for MapControls.js .
• Here's a demonstration of the controls.

Answer 3

It seems like this will be a nice feature, and this is apparently an easy change to existing OrbitControls.js . Replace the following two methods.

 var panLeft = function() { var v = new THREE.Vector3(); return function panLeft( distance, objectMatrix ) { var te = objectMatrix.elements; // get elements from the X-column of matrix v.set( te[ 0 ], 0, te[ 2 ] ).normalize(); v.multiplyScalar( - distance ); panOffset.add( v ); }; }(); var panUp = function() { var v = new THREE.Vector3(); return function panUp( distance, objectMatrix ) { var te = objectMatrix.elements; // get elements from the Z-column of matrix v.set( te[ 8 ], 0, te[ 10 ] ).normalize(); v.multiplyScalar( - distance ); panOffset.add( v ); }; }(); 

Flip the signs if you want the pan to have the opposite behavior.

The arrow keys should also work. Modify handleKeyDown() necessary.

three.js r.75

Answer 4

You must set your camera up to z ax:

camera.up.set(0,0,1)

And then the main problem with OrbitControl is the panUp () function. It must be fixed.

My pull request: https://github.com/mrdoob/three.js/pull/12727

y ax relative to the camera axes and should refer to a fixed plan in the world. To determine the expected y ax, rotate 90 ° of the camera x ax, based on the world z ax.

 v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix v.applyAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI / 2 ); v.multiplyScalar( distance ); panOffset.add( v ) 

Enjoy it!