MapControls: Improve panning accuracy (#32324)

examples/jsm/controls/MapControls.js

@@ -1,7 +1,12 @@
-import { MOUSE, TOUCH } from 'three';
+import { MOUSE, TOUCH, Plane, Raycaster, Vector2, Vector3 } from 'three';
 
 import { OrbitControls } from './OrbitControls.js';
 
+const _plane = new Plane();
+const _raycaster = new Raycaster();
+const _mouse = new Vector2();
+const _panCurrent = new Vector3();
+
 /**
  * This class is intended for transforming a camera over a map from bird's eye perspective.
  * The class shares its implementation with {@link OrbitControls} but uses a specific preset
@@ -55,6 +60,55 @@ class MapControls extends OrbitControls {
 		 */
 		this.touches = { ONE: TOUCH.PAN, TWO: TOUCH.DOLLY_ROTATE };
 
+		this._panWorldStart = new Vector3();
+
+	}
+
+	_handleMouseDownPan( event ) {
+
+		super._handleMouseDownPan( event );
+
+		this._panOffset.set( 0, 0, 0 );
+
+		if ( this.screenSpacePanning === true ) return;
+
+		_plane.setFromNormalAndCoplanarPoint( this.object.up, this.target );
+
+		const element = this.domElement;
+		const rect = element.getBoundingClientRect();
+		_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
+		_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
+
+		_raycaster.setFromCamera( _mouse, this.object );
+		_raycaster.ray.intersectPlane( _plane, this._panWorldStart );
+
+	}
+
+	_handleMouseMovePan( event ) {
+
+		if ( this.screenSpacePanning === true ) {
+
+			super._handleMouseMovePan( event );
+			return;
+
+		}
+
+		const element = this.domElement;
+		const rect = element.getBoundingClientRect();
+		_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
+		_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
+
+		_raycaster.setFromCamera( _mouse, this.object );
+
+		if ( _raycaster.ray.intersectPlane( _plane, _panCurrent ) ) {
+
+			_panCurrent.sub( this._panWorldStart );
+			this._panOffset.copy( _panCurrent ).negate();
+
+			this.update();
+
+		}
+
 	}
 
 }