@shapediver/viewer.rendering-engine.camera-engine 2.12.8 → 3.0.1

package/src/implementation/controls/{perspective/CameraControlsEventDistribution.ts → CameraControlsEventDistribution.ts}

@@ -1,26 +1,33 @@
-import { CameraControlsLogic } from './CameraControlsLogic';
-import { ICameraControlsEventDistribution } from '../../../interfaces/controls/ICameraControlsEventDistribution';
-import { PerspectiveCameraControls } from '../PerspectiveCameraControls';
+import { ICameraControls } from '../../interfaces/controls/ICameraControls';
+import { ICameraControlsEventDistribution } from '../../interfaces/controls/ICameraControlsEventDistribution';
+import { ICameraControlsLogic } from '../../interfaces/controls/ICameraControlsLogic';
 
 export class CameraControlsEventDistribution implements ICameraControlsEventDistribution {
-  // #region Properties (2)
+  // #region Properties (6)
 
-  private _active = {
+  protected _active = {
     rotation: false,
     zoom: false,
     pan: false
   };
-  private _activeEvents = true;
+  protected _activeEvents = true;
+  protected _cameraLogic: ICameraControlsLogic;
+  protected _controls: ICameraControls;
+  protected _primaryPointerEvent?: PointerEvent;
+  protected _secondaryPointerEvent?: PointerEvent;
 
-  // #endregion Properties (2)
+  // #endregion Properties (6)
 
   // #region Constructors (1)
 
-  constructor(private readonly _controls: PerspectiveCameraControls, private readonly _cameraLogic: CameraControlsLogic) { }
+  constructor(controls: ICameraControls, cameraLogic: ICameraControlsLogic) {
+    this._controls = controls;
+    this._cameraLogic = cameraLogic;
+  }
 
   // #endregion Constructors (1)
 
-  // #region Public Methods (20)
+  // #region Public Methods (16)
 
   public activateCameraEvents(): void {
     this._activeEvents = true;
@@ -31,22 +38,24 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
     this.reset();
   }
 
-  public onDown(event: MouseEvent | TouchEvent): void {
+  public onDown(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
+
     const { x, y } = this.convertInput(event);
 
-    const input = window.TouchEvent && event instanceof TouchEvent ? (event as TouchEvent).touches.length : (event as MouseEvent).button;
-    const mapping = window.TouchEvent && event instanceof TouchEvent ? this._controls.input.touch : this._controls.input.mouse;
+    const touchEvent = event.pointerType === 'touch';
+    const input = this.getInput(event);
+    const mapping = event.pointerType === 'touch' ? this._controls.input.touch : this._controls.input.mouse;
 
     if (input === mapping.rotate && this._controls.enableRotation) {
-      this._cameraLogic.rotate(x, y, this._active.rotation, window.TouchEvent && event instanceof TouchEvent);
+      this._cameraLogic.rotate(x, y, this._active.rotation, touchEvent);
       this._active.rotation = true;
     } else {
       this._active.rotation = false;
     }
 
     if (input === mapping.pan && this._controls.enablePan) {
-      this._cameraLogic.pan(x, y, this._active.pan, window.TouchEvent && event instanceof TouchEvent);
+      this._cameraLogic.pan(x, y, this._active.pan, touchEvent);
       this._active.pan = true;
     } else {
       this._active.pan = false;
@@ -54,11 +63,11 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
 
     if (input === mapping.zoom && this._controls.enableZoom) {
       let x1 = x, y1 = y;
-      if (window.TouchEvent && event instanceof TouchEvent && this._controls.input.touch.zoom === 2 && event.touches.length >= 2) {
-        x1 = (event.touches[0].pageX - event.touches[1].pageX) / window.innerWidth * (window.innerWidth / window.innerHeight);
-        y1 = (event.touches[0].pageY - event.touches[1].pageY) / window.innerHeight;
+      if (touchEvent && this._controls.input.touch.zoom === 2 && this._primaryPointerEvent && this._secondaryPointerEvent) {
+        x1 = (this._primaryPointerEvent!.pageX - this._secondaryPointerEvent!.pageX) / window.innerWidth * (window.innerWidth / window.innerHeight);
+        y1 = (this._primaryPointerEvent!.pageY - this._secondaryPointerEvent!.pageY) / window.innerHeight;
       }
-      this._cameraLogic.zoom(x1, y1, this._active.zoom, window.TouchEvent && event instanceof TouchEvent);
+      this._cameraLogic.zoom(x1, y1, this._active.zoom, touchEvent);
       this._active.zoom = true;
     } else {
       this._active.zoom = false;
@@ -105,31 +114,7 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
     this.onKey(event);
   }
 
-  public onMouseDown(event: MouseEvent): void {
-    if (this._controls.camera.active === false) return;
-    if (!this._activeEvents) return;
-    this.onDown(event);
-  }
-
-  public onMouseEnd(event: MouseEvent): void {
-    if (this._controls.camera.active === false) return;
-    if (!this._activeEvents) return;
-    this.onUp(event);
-  }
-
-  public onMouseMove(event: MouseEvent): void {
-    if (this._controls.camera.active === false) return;
-    if (!this._activeEvents) return;
-    this.onMove(event);
-  }
-
-  public onMouseOut(event: WheelEvent): void {
-    if (this._controls.camera.active === false) return;
-  }
-
-  public onMouseUp(event: WheelEvent): void {
-    if (this._controls.camera.active === false) return;
-  }
+  public onKeyUp(event: KeyboardEvent): void { }
 
   public onMouseWheel(event: WheelEvent): void {
     if (this._controls.camera.active === false) return;
@@ -137,53 +122,83 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
     this.onWheel(event);
   }
 
-  public onMove(event: MouseEvent | TouchEvent): void {
+  public onMove(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
     const { x, y } = this.convertInput(event);
 
+    const touchEvent = event.pointerType === 'touch';
+
     if (this._controls.enableRotation && this._active.rotation)
-      this._cameraLogic.rotate(x, y, this._active.rotation, window.TouchEvent && event instanceof TouchEvent);
+      this._cameraLogic.rotate(x, y, this._active.rotation, touchEvent);
 
     if (this._controls.enablePan && this._active.pan)
-      this._cameraLogic.pan(x, y, this._active.pan, window.TouchEvent && event instanceof TouchEvent);
+      this._cameraLogic.pan(x, y, this._active.pan, touchEvent);
 
     if (this._controls.enableZoom && this._active.zoom) {
       let x1 = x, y1 = y;
-      if (window.TouchEvent && event instanceof TouchEvent && this._controls.input.touch.zoom === 2 && event.touches.length >= 2) {
-        x1 = (event.touches[0].pageX - event.touches[1].pageX) / window.innerWidth * (window.innerWidth / window.innerHeight);
-        y1 = (event.touches[0].pageY - event.touches[1].pageY) / window.innerHeight;
+      if (touchEvent && this._controls.input.touch.zoom === 2 && this._primaryPointerEvent && this._secondaryPointerEvent) {
+        x1 = (this._primaryPointerEvent!.pageX - this._secondaryPointerEvent!.pageX) / window.innerWidth * (window.innerWidth / window.innerHeight);
+        y1 = (this._primaryPointerEvent!.pageY - this._secondaryPointerEvent!.pageY) / window.innerHeight;
       }
-      this._cameraLogic.zoom(x1, y1, this._active.zoom, window.TouchEvent && event instanceof TouchEvent);
+      this._cameraLogic.zoom(x1, y1, this._active.zoom, touchEvent);
     }
   }
 
-  public onTouchCancel(event: TouchEvent): void {
+  public onPointerDown(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
+    if (!this._activeEvents) return;
+
+    if (event.isPrimary === true)
+      this._primaryPointerEvent = event;
+    else if (event.isPrimary === false)
+      this._secondaryPointerEvent = event;
+
+    this.onDown(event);
   }
 
-  public onTouchEnd(event: TouchEvent): void {
+  public onPointerEnd(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
     if (!this._activeEvents) return;
+
+    if (event.isPrimary === true)
+      this._primaryPointerEvent = undefined;
+    else if (event.isPrimary === false)
+      this._secondaryPointerEvent = undefined;
+
     this.onUp(event);
   }
 
-  public onTouchMove(event: TouchEvent): void {
+  public onPointerMove(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
     if (!this._activeEvents) return;
+
+    if (event.isPrimary === true)
+      this._primaryPointerEvent = event;
+    else if (event.isPrimary === false)
+      this._secondaryPointerEvent = event;
+
     this.onMove(event);
   }
 
-  public onTouchStart(event: TouchEvent): void {
+  public onPointerOut(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
-    if (!this._activeEvents) return;
-    this.onDown(event);
+
+    if (event.isPrimary === true)
+      this._primaryPointerEvent = undefined;
+    else if (event.isPrimary === false)
+      this._secondaryPointerEvent = undefined;
   }
 
-  public onTouchUp(event: TouchEvent): void {
+  public onPointerUp(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
+
+    if (event.isPrimary === true)
+      this._primaryPointerEvent = undefined;
+    else if (event.isPrimary === false)
+      this._secondaryPointerEvent = undefined;
   }
 
-  public onUp(event: MouseEvent | TouchEvent): void {
+  public onUp(event: PointerEvent): void {
     if (this._controls.camera.active === false) return;
     this._active.rotation = false;
     this._active.zoom = false;
@@ -212,7 +227,7 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
     }
   }
 
-  public reset() {
+  public reset(): void {
     this._active = {
       rotation: false,
       zoom: false,
@@ -220,29 +235,35 @@ export class CameraControlsEventDistribution implements ICameraControlsEventDist
     };
   }
 
-  // #endregion Public Methods (20)
+  // #endregion Public Methods (16)
 
-  // #region Private Methods (1)
+  // #region Protected Methods (2)
 
-  private convertInput(event: MouseEvent | TouchEvent): { x: number, y: number } {
-    if (event instanceof MouseEvent) {
+  protected convertInput(event: PointerEvent): { x: number, y: number } {
+    if (this._primaryPointerEvent && this._secondaryPointerEvent) {
       return {
-        x: event.clientX,
-        y: event.clientY
+        x: (this._primaryPointerEvent.pageX + this._secondaryPointerEvent.pageX) / 2,
+        y: (this._primaryPointerEvent.pageY + this._secondaryPointerEvent.pageY) / 2
       };
     } else {
-      if (event.touches.length < 1) return { x: 0, y: 0 };
-      if (event.touches.length === 1)
-        return {
-          x: event.touches[0].pageX,
-          y: event.touches[0].pageY
-        };
       return {
-        x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
-        y: (event.touches[0].pageY + event.touches[1].pageY) / 2
+        x: event.clientX,
+        y: event.clientY
       };
     }
   }
 
-  // #endregion Private Methods (1)
-}
+  protected getInput(event: PointerEvent): number {
+    if (event.pointerType === 'touch') {
+      if (this._secondaryPointerEvent) {
+        return 2;
+      } else {
+        return 1;
+      }
+    } else {
+      return event.button;
+    }
+  }
+
+  // #endregion Protected Methods (2)
+}

package/src/implementation/controls/{perspective/CameraControlsLogic.ts → CameraControlsLogic.ts}

@@ -1,12 +1,19 @@
-import { mat4, quat, vec2, vec3 } from 'gl-matrix';
 import { Box, Sphere, Spherical } from '@shapediver/viewer.shared.math';
-
-import { PerspectiveCameraControls } from '../PerspectiveCameraControls';
-import { ICameraControlsLogic } from '../../../interfaces/controls/ICameraControlsLogic';
-import { PerspectiveCamera } from '../../camera/PerspectiveCamera';
+import { Adjustments, ICameraControls } from '../../interfaces/controls/ICameraControls';
+import { ICameraControlsLogic } from '../../interfaces/controls/ICameraControlsLogic';
+import {
+    mat4,
+    quat,
+    vec2,
+    vec3
+    } from 'gl-matrix';
+import { OrthographicCamera } from '../camera/OrthographicCamera';
+import { PerspectiveCamera } from '../camera/PerspectiveCamera';
+import { CAMERA_TYPE } from '../../interfaces/ICameraEngine';
+import { ORTHOGRAPHIC_CAMERA_DIRECTION } from '../../interfaces/camera/IOrthographicCamera';
 
 export class CameraControlsLogic implements ICameraControlsLogic {
-    // #region Properties (15)
+    // #region Properties (13)
 
     private _adjustedSettings = {
         autoRotationSpeed: () => this._controls.autoRotationSpeed * this._settingsAdjustments.autoRotationSpeed,
@@ -45,28 +52,12 @@ export class CameraControlsLogic implements ICameraControlsLogic {
     private _rotateDelta = vec2.create();
     private _rotateEnd = vec2.create();
     private _rotateStart = vec2.create();
-    private _settingsAdjustments = {
-        autoRotationSpeed: 2 * Math.PI / 60 / 60,
-        damping: 1.0,
-        movementSmoothness: 1.0,
-        panSpeed: 1.75,
-        rotationSpeed: Math.PI,
-        zoomSpeed: 0.025,
-    };
-    private _touchAdjustments = {
-        autoRotationSpeed: 1.0,
-        damping: 1.0,
-        movementSmoothness: 1.0,
-        panSpeed: 1.0 / 1.75,
-        rotationSpeed: 1.5,
-        zoomSpeed: 100.0,
-    };
 
-    // #endregion Properties (15)
+    // #endregion Properties (13)
 
     // #region Constructors (1)
 
-    constructor(private readonly _controls: PerspectiveCameraControls) {
+    constructor(private readonly _controls: ICameraControls, private readonly _settingsAdjustments: Adjustments, private readonly _touchAdjustments: Adjustments) {
         this._quat = quat.fromValues(-Math.sin(Math.PI / 4), 0, 0, Math.sin(Math.PI / 4));
         this._quatInverse = quat.fromValues(Math.sin(Math.PI / 4), 0, 0, Math.sin(Math.PI / 4));
     }
@@ -112,7 +103,6 @@ export class CameraControlsLogic implements ICameraControlsLogic {
     }
 
     public pan(x: number, y: number, active: boolean, touch: boolean): void {
-
         if (!active) {
             this._panStart = vec2.fromValues(x, y);
         } else {
@@ -226,7 +216,8 @@ export class CameraControlsLogic implements ICameraControlsLogic {
             minPolarAngle !== 0 ||
             maxPolarAngle !== 180 ||
             this._controls.enableAzimuthRotation === false ||
-            this._controls.enablePolarRotation === false
+            this._controls.enablePolarRotation === false || 
+            this._controls.enableObjectControls === true
         ) {
             let offset = vec3.subtract(vec3.create(), position, target);
             vec3.transformQuat(offset, offset, this._quat);
@@ -238,18 +229,24 @@ export class CameraControlsLogic implements ICameraControlsLogic {
                 spherical.phi < minPolarAngle ||
                 spherical.phi > maxPolarAngle ||
                 this._controls.enableAzimuthRotation === false ||
-                this._controls.enablePolarRotation === false
+                this._controls.enablePolarRotation === false || 
+                this._controls.enableObjectControls === true
             ) {
                 spherical.theta = Math.max(minAzimuthAngle, Math.min(maxAzimuthAngle, spherical.theta));
                 spherical.phi = Math.max(minPolarAngle, Math.min(maxPolarAngle, spherical.phi));
 
-                if (this._controls.enableAzimuthRotation === false || this._controls.enablePolarRotation === false) {
+                if (this._controls.enableAzimuthRotation === false || this._controls.enablePolarRotation === false || this._controls.enableObjectControls === true) {
                     const defaultOffset = vec3.subtract(vec3.create(), this._controls.camera.defaultPosition, this._controls.camera.defaultTarget);
                     vec3.transformQuat(defaultOffset, defaultOffset, this._quat);
 
                     const defaultSpherical = new Spherical().fromVec3(defaultOffset);
                     if (this._controls.enableAzimuthRotation === false) spherical.theta = defaultSpherical.theta;
                     if (this._controls.enablePolarRotation === false) spherical.phi = defaultSpherical.phi;
+
+                    if(this._controls.enableObjectControls) {
+                        spherical.theta = defaultSpherical.theta;
+                        spherical.phi = defaultSpherical.phi;
+                    }
                 }
 
                 spherical.makeSafe();
@@ -258,12 +255,14 @@ export class CameraControlsLogic implements ICameraControlsLogic {
                 vec3.add(position, offset, target);
             }
 
-            if (sceneRotation[1] < minAzimuthAngle ||
+            if ((sceneRotation[1] < minAzimuthAngle ||
                 sceneRotation[1] > maxAzimuthAngle ||
                 sceneRotation[0] < minPolarAngle ||
                 sceneRotation[0] > maxPolarAngle ||
                 this._controls.enableAzimuthRotation === false ||
-                this._controls.enablePolarRotation === false) {
+                this._controls.enablePolarRotation === false) &&
+                this._controls.enableObjectControls === false
+            ) {
                 sceneRotation[1] = this._controls.enableAzimuthRotation === false ? 0 : Math.max(minAzimuthAngle, Math.min(maxAzimuthAngle, sceneRotation[1]));
                 sceneRotation[0] = this._controls.enablePolarRotation === false ? 0 : Math.max(minPolarAngle, Math.min(maxPolarAngle, sceneRotation[0]));
             }
@@ -273,6 +272,7 @@ export class CameraControlsLogic implements ICameraControlsLogic {
     }
 
     public rotate(x: number, y: number, active: boolean, touch: boolean): void {
+        if (this._controls.camera.type === CAMERA_TYPE.ORTHOGRAPHIC && (this._controls.camera as OrthographicCamera).direction !== ORTHOGRAPHIC_CAMERA_DIRECTION.CUSTOM) return;
 
         if (!active) {
             this._rotateStart = vec2.fromValues(x, y);
@@ -297,7 +297,11 @@ export class CameraControlsLogic implements ICameraControlsLogic {
                 spherical.phi += phiDelta * this._adjustedSettings.movementSmoothness();
             }
 
-            const offset = this.rotationSphericalToOffset(this._controls.enableTurntableControls ? new Spherical(1.0, spherical.phi, 0) : spherical);
+            let sphericalForOffset = spherical;
+            if(this._controls.enableTurntableControls)
+                sphericalForOffset = new Spherical(1.0, spherical.phi, 0);
+
+            const offset = this.rotationSphericalToOffset(sphericalForOffset);
 
             const damping = 1 - Math.max(0.01, Math.min(1, this._adjustedSettings.damping()));
             const framesTheta = (Math.log(1 / Math.abs(spherical.theta)) - 5 * Math.log(10)) / (Math.log(damping));
@@ -312,7 +316,9 @@ export class CameraControlsLogic implements ICameraControlsLogic {
             this._damping.zoom.duration = 0;
 
             this._controls.applyPositionVector(offset, true);
+
             if (this._controls.enableTurntableControls) this._controls.applyRotation([0, spherical.theta], true);
+            if (this._controls.enableObjectControls) this._controls.applyRotation([spherical.phi, spherical.theta], true);
         }
     }
 
@@ -353,9 +359,16 @@ export class CameraControlsLogic implements ICameraControlsLogic {
                 const spherical = new Spherical();
                 spherical.theta = this._damping.rotation.theta * Math.pow(damping, frameSinceStart);
                 spherical.phi = this._damping.rotation.phi * Math.pow(damping, frameSinceStart);
-                const offset = this.rotationSphericalToOffset(this._controls.enableTurntableControls ? new Spherical(1.0, spherical.phi, 0) : spherical);
+                    
+                let sphericalForOffset = spherical;
+                if(this._controls.enableTurntableControls)
+                    sphericalForOffset = new Spherical(1.0, spherical.phi, 0);
+
+                const offset = this.rotationSphericalToOffset(sphericalForOffset);
                 this._controls.applyPositionVector(offset);
+
                 if (this._controls.enableTurntableControls) this._controls.applyRotation([0, spherical.theta]);
+                if (this._controls.enableObjectControls) this._controls.applyRotation([spherical.phi, spherical.theta]);
             }
         } else {
             this._damping.rotation.time = 0;
@@ -379,9 +392,15 @@ export class CameraControlsLogic implements ICameraControlsLogic {
 
         if (this._controls.enableAutoRotation) {
             const spherical = new Spherical(1.0, 0.0, -this._adjustedSettings.autoRotationSpeed());
-            const offset = this.rotationSphericalToOffset(this._controls.enableTurntableControls ? new Spherical(1.0, spherical.phi, 0) : spherical);
+
+            let sphericalForOffset = spherical;
+            if(this._controls.enableTurntableControls)
+                sphericalForOffset = new Spherical(1.0, spherical.phi, 0);
+            const offset = this.rotationSphericalToOffset(sphericalForOffset);
+
             this._controls.applyPositionVector(offset);
             if (this._controls.enableTurntableControls) this._controls.applyRotation([0, spherical.theta]);
+            if (this._controls.enableObjectControls) this._controls.applyRotation([spherical.phi, spherical.theta]);
         }
     }
 
@@ -426,31 +445,49 @@ export class CameraControlsLogic implements ICameraControlsLogic {
     private panDeltaToOffset(panDelta: vec2): vec3 {
         const offset = vec3.create();
         const panOffset = vec3.create();
-        
+
         if (!this._controls.canvas) return offset;
         if (this._controls.canvas.clientWidth == 0 || this._controls.canvas.clientHeight == 0) return offset;
 
         // perspective
         vec3.subtract(offset, this._controls.getPositionWithManualUpdates(), this._controls.getTargetWithManualUpdates());
-        let targetDistance = vec3.length(offset);
-
-        // half of the fov is center to top of screen
-        targetDistance *= Math.tan((((<PerspectiveCamera>this._controls.camera).fov / 2) * Math.PI) / 180.0);
-
-        // we use only clientHeight here so aspect ratio does not distort speed
-        // left
-        const mat = mat4.targetTo(mat4.create(), this._controls.camera.position, this._controls.camera.target, vec3.fromValues(0, 0, 1));
-
-        const v1 = vec3.fromValues(mat[0], mat[1], mat[2]);
-        const scalar1 = -(2 * panDelta[0] * targetDistance / this._controls.canvas?.clientHeight);
-        vec3.multiply(v1, v1, vec3.fromValues(scalar1, scalar1, scalar1));
-        vec3.add(panOffset, panOffset, v1);
-
-        // // up
-        const v2 = vec3.fromValues(mat[4], mat[5], mat[6]);
-        const scalar2 = 2 * panDelta[1] * targetDistance / this._controls.canvas?.clientHeight;
-        vec3.multiply(v2, v2, vec3.fromValues(scalar2, scalar2, scalar2));
-        vec3.add(panOffset, panOffset, v2);
+        if(this._controls.camera instanceof OrthographicCamera) {
+            const orthographicCamera: OrthographicCamera = <OrthographicCamera>this._controls.camera;
+            const mat = mat4.targetTo(mat4.create(), orthographicCamera.position, orthographicCamera.target, orthographicCamera.up);
+        
+            // // we use only clientHeight here so aspect ratio does not distort speed
+            // // left
+            const v1 = vec3.fromValues(mat[0], mat[1], mat[2]);
+            const scalar1 = -(panDelta[0] * (orthographicCamera.right - orthographicCamera.left) * 0.5 / this._controls.canvas?.clientHeight /** orthographicCamera.zoom */);
+            vec3.multiply(v1, v1, vec3.fromValues(scalar1, scalar1, scalar1));
+            vec3.add(panOffset, panOffset, v1);
+        
+            // // up
+            const v2 = vec3.fromValues(mat[4], mat[5], mat[6]);
+            const scalar2 = panDelta[1] * (orthographicCamera.right - orthographicCamera.left) * 0.5 / this._controls.canvas?.clientHeight /** orthographicCamera.zoom */;
+            vec3.multiply(v2, v2, vec3.fromValues(scalar2, scalar2, scalar2));
+            vec3.add(panOffset, panOffset, v2);
+        } else {
+            let targetDistance = vec3.length(offset);
+
+            // half of the fov is center to top of screen
+            targetDistance *= Math.tan((((<PerspectiveCamera>this._controls.camera).fov / 2) * Math.PI) / 180.0);
+    
+            // we use only clientHeight here so aspect ratio does not distort speed
+            // left
+            const mat = mat4.targetTo(mat4.create(), this._controls.camera.position, this._controls.camera.target, vec3.fromValues(0, 0, 1));
+    
+            const v1 = vec3.fromValues(mat[0], mat[1], mat[2]);
+            const scalar1 = -(2 * panDelta[0] * targetDistance / this._controls.canvas?.clientHeight);
+            vec3.multiply(v1, v1, vec3.fromValues(scalar1, scalar1, scalar1));
+            vec3.add(panOffset, panOffset, v1);
+    
+            // // up
+            const v2 = vec3.fromValues(mat[4], mat[5], mat[6]);
+            const scalar2 = 2 * panDelta[1] * targetDistance / this._controls.canvas?.clientHeight;
+            vec3.multiply(v2, v2, vec3.fromValues(scalar2, scalar2, scalar2));
+            vec3.add(panOffset, panOffset, v2);
+        }
 
         return vec3.clone(panOffset);
     }