feat: add screen pan mouse config (#553)

* chore: update deps * add SCREEN_PAN config and remove verticalDragToForward
yomotsu · Dec 21, 2024 · 99a2339 · 99a2339
1 parent f9b9ac1
commit 99a2339
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 45 deletions.
diff --git a/examples/config.html b/examples/config.html
@@ -18,6 +18,8 @@
 	<select onchange="cameraControls.mouseButtons.left = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE" selected>CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK">CameraControls.ACTION.TRUCK</option>
+		<option value="SCREEN_PAN">CameraControls.ACTION.SCREEN_PAN</option>
+		<option value="FORWARD_ROTATE">CameraControls.ACTION.FORWARD_ROTATE</option>
 		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY">CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
@@ -28,6 +30,8 @@
 	<select onchange="cameraControls.mouseButtons.middle = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE">CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK">CameraControls.ACTION.TRUCK</option>
+		<option value="SCREEN_PAN">CameraControls.ACTION.SCREEN_PAN</option>
+		<option value="FORWARD_ROTATE">CameraControls.ACTION.FORWARD_ROTATE</option>
 		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY" selected>CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
@@ -38,6 +42,8 @@
 	<select onchange="cameraControls.mouseButtons.right = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE">CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK" selected>CameraControls.ACTION.TRUCK</option>
+		<option value="SCREEN_PAN">CameraControls.ACTION.SCREEN_PAN</option>
+		<option value="FORWARD_ROTATE">CameraControls.ACTION.FORWARD_ROTATE</option>
 		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY">CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
@@ -48,6 +54,8 @@
 	<select onchange="cameraControls.mouseButtons.wheel = CameraControls.ACTION[ this.value ]">
 		<option value="ROTATE">CameraControls.ACTION.ROTATE</option>
 		<option value="TRUCK">CameraControls.ACTION.TRUCK</option>
+		<option value="SCREEN_PAN">CameraControls.ACTION.SCREEN_PAN</option>
+		<option value="FORWARD_ROTATE">CameraControls.ACTION.FORWARD_ROTATE</option>
 		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY" selected>CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
@@ -57,8 +65,9 @@
 
 	cameraControls.touches.one =
 	<select onchange="cameraControls.touches.one = CameraControls.ACTION[ this.value ]">
-		<option value="ROTATE" selected>CameraControls.ACTION.TOUCH_ROTATE</option>
-		<option value="TRUCK">CameraControls.ACTION.TOUCH_TRUCK</option>
+		<option value="TOUCH_ROTATE" selected>CameraControls.ACTION.TOUCH_ROTATE</option>
+		<option value="TOUCH_TRUCK">CameraControls.ACTION.TOUCH_TRUCK</option>
+		<option value="TOUCH_SCREEN_PAN">CameraControls.ACTION.TOUCH_SCREEN_PAN</option>
 		<option value="OFFSET">CameraControls.ACTION.OFFSET</option>
 		<option value="DOLLY">CameraControls.ACTION.DOLLY</option>
 		<option value="ZOOM">CameraControls.ACTION.ZOOM</option>
@@ -68,30 +77,36 @@
 	cameraControls.touches.two =
 	<select onchange="cameraControls.touches.two = CameraControls.ACTION[ this.value ]">
 		<option value="TOUCH_DOLLY_TRUCK" selected>CameraControls.ACTION.TOUCH_DOLLY_TRUCK</option>
+		<option value="TOUCH_DOLLY_SCREEN_PAN">CameraControls.ACTION.TOUCH_DOLLY_SCREEN_PAN</option>
 		<option value="TOUCH_DOLLY_OFFSET">CameraControls.ACTION.TOUCH_DOLLY_OFFSET</option>
 		<option value="TOUCH_DOLLY_ROTATE">CameraControls.ACTION.TOUCH_DOLLY_ROTATE</option>
 		<option value="TOUCH_ZOOM_TRUCK">CameraControls.ACTION.TOUCH_ZOOM_TRUCK</option>
+		<option value="TOUCH_ZOOM_SCREEN_PAN">CameraControls.ACTION.TOUCH_ZOOM_SCREEN_PAN</option>
 		<option value="TOUCH_ZOOM_OFFSET">CameraControls.ACTION.TOUCH_ZOOM_OFFSET</option>
 		<option value="TOUCH_ZOOM_ROTATE">CameraControls.ACTION.TOUCH_ZOOM_ROTATE</option>
 		<option value="TOUCH_DOLLY">CameraControls.ACTION.TOUCH_DOLLY</option>
 		<option value="TOUCH_ZOOM">CameraControls.ACTION.TOUCH_ZOOM</option>
 		<option value="TOUCH_ROTATE">CameraControls.ACTION.TOUCH_ROTATE</option>
 		<option value="TOUCH_TRUCK">CameraControls.ACTION.TOUCH_TRUCK</option>
+		<option value="TOUCH_SCREEN_PAN">CameraControls.ACTION.TOUCH_SCREEN_PAN</option>
 		<option value="TOUCH_OFFSET">CameraControls.ACTION.TOUCH_OFFSET</option>
 	</select>
 	<br>
 	cameraControls.touches.three =
 	<select onchange="cameraControls.touches.three = CameraControls.ACTION[ this.value ]">
 		<option value="TOUCH_DOLLY_TRUCK">CameraControls.ACTION.TOUCH_DOLLY_TRUCK</option>
+		<option value="TOUCH_DOLLY_SCREEN_PAN">CameraControls.ACTION.TOUCH_DOLLY_SCREEN_PAN</option>
 		<option value="TOUCH_DOLLY_OFFSET">CameraControls.ACTION.TOUCH_DOLLY_OFFSET</option>
 		<option value="TOUCH_DOLLY_ROTATE">CameraControls.ACTION.TOUCH_DOLLY_ROTATE</option>
 		<option value="TOUCH_ZOOM_TRUCK">CameraControls.ACTION.TOUCH_ZOOM_TRUCK</option>
+		<option value="TOUCH_ZOOM_SCREEN_PAN">CameraControls.ACTION.TOUCH_ZOOM_SCREEN_PAN</option>
 		<option value="TOUCH_ZOOM_OFFSET">CameraControls.ACTION.TOUCH_ZOOM_OFFSET</option>
 		<option value="TOUCH_ZOOM_ROTATE">CameraControls.ACTION.TOUCH_ZOOM_ROTATE</option>
 		<option value="TOUCH_DOLLY">CameraControls.ACTION.TOUCH_DOLLY</option>
 		<option value="TOUCH_ZOOM">CameraControls.ACTION.TOUCH_ZOOM</option>
 		<option value="TOUCH_ROTATE">CameraControls.ACTION.TOUCH_ROTATE</option>
 		<option value="TOUCH_TRUCK" selected>CameraControls.ACTION.TOUCH_TRUCK</option>
+		<option value="TOUCH_SCREEN_PAN">CameraControls.ACTION.TOUCH_SCREEN_PAN</option>
 		<option value="TOUCH_OFFSET">CameraControls.ACTION.TOUCH_OFFSET</option>
 	</select>
 </div>

diff --git a/readme.md b/readme.md
@@ -177,7 +177,6 @@ See [the demo](https://github.com/yomotsu/camera-movement-comparison#dolly-vs-zo
 | `.polarRotateSpeed`       | `number`  | `1.0`       | Speed of polar rotation. |
 | `.dollySpeed`             | `number`  | `1.0`       | Speed of mouse-wheel dollying. |
 | `.truckSpeed`             | `number`  | `2.0`       | Speed of drag for truck and pedestal. |
-| `.verticalDragToForward`  | `boolean` | `false`     | The same as `.screenSpacePanning` in three.js's OrbitControls. |
 | `.dollyToCursor`          | `boolean` | `false`     | `true` to enable Dolly-in to the mouse cursor coords. |
 | `.dollyDragInverted`      | `boolean` | `false`     | `true` to invert direction when dollying or zooming via drag. |
 | `.interactiveArea`        | `DOMRect` | N/A         | Set drag-start, touches and wheel enable area in the domElement. each values are between `0` and `1` inclusive, where `0` is left/top and `1` is right/bottom of the screen. |
@@ -217,10 +216,10 @@ Working example: [user input config](https://yomotsu.github.io/camera-controls/e
 
 | button to assign      | behavior |
 | --------------------- | -------- |
-| `mouseButtons.left`   | `CameraControls.ACTION.ROTATE`* \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
-| `mouseButtons.right`  | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK`* \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
-| `mouseButtons.wheel` ¹ | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
-| `mouseButtons.middle` ² | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY`* \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
+| `mouseButtons.left`   | `CameraControls.ACTION.ROTATE`* \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.SCREEN_PAN` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
+| `mouseButtons.right`  | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK`* \| `CameraControls.ACTION.SCREEN_PAN` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
+| `mouseButtons.wheel` ¹ | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.SCREEN_PAN` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
+| `mouseButtons.middle` ² | `CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.SCREEN_PAN` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY`* \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE` |
 
 1. Mouse wheel event for scroll "up/down" on mac "up/down/left/right"
 2. Mouse click on wheel event "button"
@@ -232,9 +231,9 @@ Working example: [user input config](https://yomotsu.github.io/camera-controls/e
 
 | fingers to assign     | behavior |
 | --------------------- | -------- |
-| `touches.one` | `CameraControls.ACTION.TOUCH_ROTATE`* \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.DOLLY` | `CameraControls.ACTION.ZOOM` | `CameraControls.ACTION.NONE` |
-| `touches.two` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_DOLLY_ROTATE` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `ACTION.TOUCH_ZOOM_ROTATE` \| `ACTION.TOUCH_DOLLY` \| `ACTION.TOUCH_ZOOM` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE` |
-| `touches.three` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_DOLLY_ROTATE` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `ACTION.TOUCH_ZOOM_ROTATE` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE` |
+| `touches.one` | `CameraControls.ACTION.TOUCH_ROTATE`* \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_SCREEN_PAN` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.DOLLY` | `CameraControls.ACTION.ZOOM` | `CameraControls.ACTION.NONE` |
+| `touches.two` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_SCREEN_PAN` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_DOLLY_ROTATE` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_SCREEN_PAN` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `ACTION.TOUCH_ZOOM_ROTATE` \| `ACTION.TOUCH_DOLLY` \| `ACTION.TOUCH_ZOOM` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_SCREEN_PAN` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE` |
+| `touches.three` | `ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_SCREEN_PAN` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_DOLLY_ROTATE` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_SCREEN_PAN` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `ACTION.TOUCH_ZOOM_ROTATE` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_SCREEN_PAN` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE` |
 
 - \* is the default.
 - The default of `touches.two` and `touches.three` is:

diff --git a/src/CameraControls.ts b/src/CameraControls.ts
@@ -283,12 +283,6 @@ export class CameraControls extends EventDispatcher {
 	 */
 	dragToOffset = false;
 
-	/**
-	 * The same as `.screenSpacePanning` in three.js's OrbitControls.
-	 * @category Properties
-	 */
-	verticalDragToForward = false;
-
 	/**
 	 * Friction ratio of the boundary.
 	 * @category Properties
@@ -778,15 +772,23 @@ export class CameraControls extends EventDispatcher {
 
 				case ACTION.TRUCK: {
 
-					this._truckInternal( event.deltaX, event.deltaY, false );
+					this._truckInternal( event.deltaX, event.deltaY, false, false );
+					this._isUserControllingTruck = true;
+					break;
+
+				}
+
+				case ACTION.SCREEN_PAN: {
+
+					this._truckInternal( event.deltaX, event.deltaY, false, true );
 					this._isUserControllingTruck = true;
 					break;
 
 				}
 
 				case ACTION.OFFSET: {
 
-					this._truckInternal( event.deltaX, event.deltaY, true );
+					this._truckInternal( event.deltaX, event.deltaY, true, false );
 					this._isUserControllingOffset = true;
 					break;
 
@@ -918,6 +920,7 @@ export class CameraControls extends EventDispatcher {
 			}
 
 			// stop current movement on drag start
+			// - rotate
 			if (
 				( this._state & ACTION.ROTATE ) === ACTION.ROTATE ||
 				( this._state & ACTION.TOUCH_ROTATE ) === ACTION.TOUCH_ROTATE ||
@@ -932,22 +935,29 @@ export class CameraControls extends EventDispatcher {
 
 			}
 
+			// - truck and screen-pan
 			if (
 				( this._state & ACTION.TRUCK ) === ACTION.TRUCK ||
+				( this._state & ACTION.SCREEN_PAN ) === ACTION.SCREEN_PAN ||
 				( this._state & ACTION.TOUCH_TRUCK ) === ACTION.TOUCH_TRUCK ||
+				( this._state & ACTION.TOUCH_SCREEN_PAN ) === ACTION.TOUCH_SCREEN_PAN ||
 				( this._state & ACTION.TOUCH_DOLLY_TRUCK ) === ACTION.TOUCH_DOLLY_TRUCK ||
-				( this._state & ACTION.TOUCH_ZOOM_TRUCK ) === ACTION.TOUCH_ZOOM_TRUCK
+				( this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN ) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+				( this._state & ACTION.TOUCH_ZOOM_TRUCK ) === ACTION.TOUCH_ZOOM_TRUCK ||
+				( this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN ) === ACTION.TOUCH_DOLLY_SCREEN_PAN
 			) {
 
 				this._targetEnd.copy( this._target );
 				this._targetVelocity.set( 0, 0, 0 );
 
 			}
 
+			// - dolly
 			if (
 				( this._state & ACTION.DOLLY ) === ACTION.DOLLY ||
 				( this._state & ACTION.TOUCH_DOLLY ) === ACTION.TOUCH_DOLLY ||
 				( this._state & ACTION.TOUCH_DOLLY_TRUCK ) === ACTION.TOUCH_DOLLY_TRUCK ||
+				( this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN ) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
 				( this._state & ACTION.TOUCH_DOLLY_OFFSET ) === ACTION.TOUCH_DOLLY_OFFSET ||
 				( this._state & ACTION.TOUCH_DOLLY_ROTATE ) === ACTION.TOUCH_DOLLY_ROTATE
 			) {
@@ -957,10 +967,12 @@ export class CameraControls extends EventDispatcher {
 
 			}
 
+			// - zoom
 			if (
 				( this._state & ACTION.ZOOM ) === ACTION.ZOOM ||
 				( this._state & ACTION.TOUCH_ZOOM ) === ACTION.TOUCH_ZOOM ||
 				( this._state & ACTION.TOUCH_ZOOM_TRUCK ) === ACTION.TOUCH_ZOOM_TRUCK ||
+				( this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN ) === ACTION.TOUCH_ZOOM_SCREEN_PAN ||
 				( this._state & ACTION.TOUCH_ZOOM_OFFSET ) === ACTION.TOUCH_ZOOM_OFFSET ||
 				( this._state & ACTION.TOUCH_ZOOM_ROTATE ) === ACTION.TOUCH_ZOOM_ROTATE
 			) {
@@ -970,6 +982,7 @@ export class CameraControls extends EventDispatcher {
 
 			}
 
+			// - offset
 			if (
 				( this._state & ACTION.OFFSET ) === ACTION.OFFSET ||
 				( this._state & ACTION.TOUCH_OFFSET ) === ACTION.TOUCH_OFFSET ||
@@ -1002,6 +1015,7 @@ export class CameraControls extends EventDispatcher {
 
 			lastDragPosition.copy( _v2 );
 
+			// rotate
 			if (
 				( this._state & ACTION.ROTATE ) === ACTION.ROTATE ||
 				( this._state & ACTION.TOUCH_ROTATE ) === ACTION.TOUCH_ROTATE ||
@@ -1014,6 +1028,7 @@ export class CameraControls extends EventDispatcher {
 
 			}
 
+			// mouse dolly or zoom
 			if (
 				( this._state & ACTION.DOLLY ) === ACTION.DOLLY ||
 				( this._state & ACTION.ZOOM ) === ACTION.ZOOM
@@ -1037,11 +1052,14 @@ export class CameraControls extends EventDispatcher {
 
 			}
 
+			// touch dolly or zoom
 			if (
 				( this._state & ACTION.TOUCH_DOLLY ) === ACTION.TOUCH_DOLLY ||
 				( this._state & ACTION.TOUCH_ZOOM ) === ACTION.TOUCH_ZOOM ||
 				( this._state & ACTION.TOUCH_DOLLY_TRUCK ) === ACTION.TOUCH_DOLLY_TRUCK ||
 				( this._state & ACTION.TOUCH_ZOOM_TRUCK ) === ACTION.TOUCH_ZOOM_TRUCK ||
+				( this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN ) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+				( this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN ) === ACTION.TOUCH_ZOOM_SCREEN_PAN ||
 				( this._state & ACTION.TOUCH_DOLLY_OFFSET ) === ACTION.TOUCH_DOLLY_OFFSET ||
 				( this._state & ACTION.TOUCH_ZOOM_OFFSET ) === ACTION.TOUCH_ZOOM_OFFSET ||
 				( this._state & ACTION.TOUCH_DOLLY_ROTATE ) === ACTION.TOUCH_DOLLY_ROTATE ||
@@ -1061,6 +1079,7 @@ export class CameraControls extends EventDispatcher {
 					( this._state & ACTION.TOUCH_DOLLY ) === ACTION.TOUCH_DOLLY ||
 					( this._state & ACTION.TOUCH_DOLLY_ROTATE ) === ACTION.TOUCH_DOLLY_ROTATE ||
 					( this._state & ACTION.TOUCH_DOLLY_TRUCK ) === ACTION.TOUCH_DOLLY_TRUCK ||
+					( this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN ) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
 					( this._state & ACTION.TOUCH_DOLLY_OFFSET ) === ACTION.TOUCH_DOLLY_OFFSET
 				) {
 
@@ -1076,26 +1095,41 @@ export class CameraControls extends EventDispatcher {
 
 			}
 
+			// truck
 			if (
 				( this._state & ACTION.TRUCK ) === ACTION.TRUCK ||
 				( this._state & ACTION.TOUCH_TRUCK ) === ACTION.TOUCH_TRUCK ||
 				( this._state & ACTION.TOUCH_DOLLY_TRUCK ) === ACTION.TOUCH_DOLLY_TRUCK ||
 				( this._state & ACTION.TOUCH_ZOOM_TRUCK ) === ACTION.TOUCH_ZOOM_TRUCK
 			) {
 
-				this._truckInternal( deltaX, deltaY, false );
+				this._truckInternal( deltaX, deltaY, false, false );
+				this._isUserControllingTruck = true;
+
+			}
+
+			// screen-pan
+			if (
+				( this._state & ACTION.SCREEN_PAN ) === ACTION.SCREEN_PAN ||
+				( this._state & ACTION.TOUCH_SCREEN_PAN ) === ACTION.TOUCH_SCREEN_PAN ||
+				( this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN ) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+				( this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN ) === ACTION.TOUCH_ZOOM_SCREEN_PAN
+			) {
+
+				this._truckInternal( deltaX, deltaY, false, true );
 				this._isUserControllingTruck = true;
 
 			}
 
+			// offset
 			if (
 				( this._state & ACTION.OFFSET ) === ACTION.OFFSET ||
 				( this._state & ACTION.TOUCH_OFFSET ) === ACTION.TOUCH_OFFSET ||
 				( this._state & ACTION.TOUCH_DOLLY_OFFSET ) === ACTION.TOUCH_DOLLY_OFFSET ||
 				( this._state & ACTION.TOUCH_ZOOM_OFFSET ) === ACTION.TOUCH_ZOOM_OFFSET
 			) {
 
-				this._truckInternal( deltaX, deltaY, true );
+				this._truckInternal( deltaX, deltaY, true, false );
 				this._isUserControllingOffset = true;
 
 			}
@@ -2803,7 +2837,6 @@ export class CameraControls extends EventDispatcher {
 			dollySpeed           : this.dollySpeed,
 			truckSpeed           : this.truckSpeed,
 			dollyToCursor        : this.dollyToCursor,
-			verticalDragToForward: this.verticalDragToForward,
 
 			target               : this._targetEnd.toArray(),
 			position             : _v3A.setFromSpherical( this._sphericalEnd ).add( this._targetEnd ).toArray(),
@@ -2844,7 +2877,6 @@ export class CameraControls extends EventDispatcher {
 		this.dollySpeed            = obj.dollySpeed;
 		this.truckSpeed            = obj.truckSpeed;
 		this.dollyToCursor         = obj.dollyToCursor;
-		this.verticalDragToForward = obj.verticalDragToForward;
 
 		this._target0.fromArray( obj.target0 );
 		this._position0.fromArray( obj.position0 );
@@ -3017,7 +3049,7 @@ export class CameraControls extends EventDispatcher {
 
 	}
 
-	protected _truckInternal = ( deltaX: number, deltaY: number, dragToOffset: boolean ): void => {
+	protected _truckInternal = ( deltaX: number, deltaY: number, dragToOffset: boolean, screenSpacePanning: boolean ): void => {
 
 		let truckX: number;
 		let pedestalY: number;
@@ -3045,7 +3077,7 @@ export class CameraControls extends EventDispatcher {
 
 		}
 
-		if ( this.verticalDragToForward ) {
+		if ( screenSpacePanning ) {
 
 			dragToOffset ?
 				this.setFocalOffset(
@@ -3295,6 +3327,9 @@ export class CameraControls extends EventDispatcher {
 			if ( ! ( object as _THREE.Mesh ).isMesh ) return;
 
 			const mesh = ( object as _THREE.Mesh );
+
+			if ( ! mesh.geometry ) return;
+
 			const geometry = mesh.geometry.clone();
 			geometry.applyMatrix4( mesh.matrixWorld );