fix: execute dragging once per frame (#466)

package.json

@@ -29,6 +29,7 @@
     "serve": "^14.2.1",
     "terser": "^5.19.3",
     "three": "^0.155.0",
+    "tslib": "^2.6.2",
     "typedoc": "^0.25.0",
     "typescript": "^5.2.2"
   },

src/CameraControls.ts

@@ -419,6 +419,7 @@ export class CameraControls extends EventDispatcher {
 	protected _elementRect = new DOMRect();
 
 	protected _isDragging = false;
+	protected _dragNeedsUpdate = true;
 	protected _activePointers: PointerInput[] = [];
 	protected _lockedPointer: PointerInput | null = null;
 	protected _interactiveArea = new DOMRect( 0, 0, 1, 1 );
@@ -1112,7 +1113,8 @@ export class CameraControls extends EventDispatcher {
 
 		const dragging = (): void => {
 
-			if ( ! this._enabled ) return;
+			if ( ! this._enabled || ! this._dragNeedsUpdate ) return;
+			this._dragNeedsUpdate = false;
 
 			extractClientCoordFromEvent( this._activePointers, _v2 );
 
@@ -1232,6 +1234,8 @@ export class CameraControls extends EventDispatcher {
 			extractClientCoordFromEvent( this._activePointers, _v2 );
 			lastDragPosition.copy( _v2 );
 
+			this._dragNeedsUpdate = false;
+
 			if (
 				this._activePointers.length === 0 ||
 				( this._activePointers.length === 1 && this._activePointers[ 0 ] === this._lockedPointer )
@@ -2810,6 +2814,8 @@ export class CameraControls extends EventDispatcher {
 
 		}
 
+		this._dragNeedsUpdate = true;
+
 		// collision detection
 		const maxDistance = this._collisionTest();
 		this._spherical.radius = Math.min( this._spherical.radius, maxDistance );