Geospatial Camera Keyboard Inputs and PinchToZoom

packages/dev/core/src/Cameras/Inputs/geospatialCameraKeyboardInput.ts

@@ -0,0 +1,238 @@
+import type { Nullable } from "../../types";
+import { serialize } from "../../Misc/decorators";
+import type { Observer } from "../../Misc/observable";
+import type { Scene } from "../../scene";
+import type { GeospatialCamera } from "../geospatialCamera";
+import type { ICameraInput } from "../cameraInputsManager";
+import { CameraInputTypes } from "../cameraInputsManager";
+import type { KeyboardInfo } from "../../Events/keyboardEvents";
+import { KeyboardEventTypes } from "../../Events/keyboardEvents";
+import { Tools } from "../../Misc/tools";
+import type { AbstractEngine } from "../../Engines/abstractEngine";
+
+/**
+ * Manage the keyboard inputs to control the movement of a geospatial camera.
+ * @see https://doc.babylonjs.com/features/featuresDeepDive/cameras/customizingCameraInputs
+ */
+export class GeospatialCameraKeyboardInput implements ICameraInput<GeospatialCamera> {
+    /**
+     * Defines the camera the input is attached to.
+     */
+    public camera: GeospatialCamera;
+
+    /**
+     * Defines the list of key codes associated with the up action (pan up)
+     */
+    @serialize()
+    public keysUp = [38];
+
+    /**
+     * Defines the list of key codes associated with the down action (pan down)
+     */
+    @serialize()
+    public keysDown = [40];
+
+    /**
+     * Defines the list of key codes associated with the left action (pan left)
+     */
+    @serialize()
+    public keysLeft = [37];
+
+    /**
+     * Defines the list of key codes associated with the right action (pan right)
+     */
+    @serialize()
+    public keysRight = [39];
+
+    /**
+     * Defines the list of key codes associated with zoom in (+ or =)
+     */
+    @serialize()
+    public keysZoomIn = [187, 107]; // 187 = + key, 107 = numpad +
+
+    /**
+     * Defines the list of key codes associated with zoom out (-)
+     */
+    @serialize()
+    public keysZoomOut = [189, 109]; // 189 = - key, 109 = numpad -
+
+    /**
+     * Defines the rotation sensitivity of the inputs.
+     * (How many pixels of pointer input to apply per keypress, before rotation speed factor is applied by movement class)
+     */
+    @serialize()
+    public rotationSensitivity = 1.0;
+
+    /**
+     * Defines the panning sensitivity of the inputs.
+     * (How many pixels of pointer input to apply per keypress, before pan speed factor is applied by movement class)
+     */
+    @serialize()
+    public panSensitivity: number = 1.0;
+
+    /**
+     * Defines the zooming sensitivity of the inputs.
+     * (How many pixels of pointer input to apply per keypress, before zoom speed factor is applied by movement class)
+     */
+    @serialize()
+    public zoomSensitivity: number = 1.0;
+
+    private _keys = new Array<number>();
+    private _ctrlPressed: boolean;
+    private _onCanvasBlurObserver: Nullable<Observer<AbstractEngine>>;
+    private _onKeyboardObserver: Nullable<Observer<KeyboardInfo>>;
+    private _engine: AbstractEngine;
+    private _scene: Scene;
+
+    /**
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(noPreventDefault?: boolean): void {
+        // was there a second variable defined?
+        noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
+
+        if (this._onCanvasBlurObserver) {
+            return;
+        }
+
+        this._onCanvasBlurObserver = this._engine.onCanvasBlurObservable.add(() => {
+            this._keys.length = 0;
+        });
+
+        this._onKeyboardObserver = this._scene.onKeyboardObservable.add((info) => {
+            const evt = info.event;
+            if (!evt.metaKey) {
+                if (info.type === KeyboardEventTypes.KEYDOWN) {
+                    this._ctrlPressed = evt.ctrlKey;
+
+                    if (
+                        this.keysUp.indexOf(evt.keyCode) !== -1 ||
+                        this.keysDown.indexOf(evt.keyCode) !== -1 ||
+                        this.keysLeft.indexOf(evt.keyCode) !== -1 ||
+                        this.keysRight.indexOf(evt.keyCode) !== -1 ||
+                        this.keysZoomIn.indexOf(evt.keyCode) !== -1 ||
+                        this.keysZoomOut.indexOf(evt.keyCode) !== -1
+                    ) {
+                        const index = this._keys.indexOf(evt.keyCode);
+
+                        if (index === -1) {
+                            this._keys.push(evt.keyCode);
+                        }
+
+                        if (evt.preventDefault) {
+                            if (!noPreventDefault) {
+                                evt.preventDefault();
+                            }
+                        }
+                    }
+                } else {
+                    if (
+                        this.keysUp.indexOf(evt.keyCode) !== -1 ||
+                        this.keysDown.indexOf(evt.keyCode) !== -1 ||
+                        this.keysLeft.indexOf(evt.keyCode) !== -1 ||
+                        this.keysRight.indexOf(evt.keyCode) !== -1 ||
+                        this.keysZoomIn.indexOf(evt.keyCode) !== -1 ||
+                        this.keysZoomOut.indexOf(evt.keyCode) !== -1
+                    ) {
+                        const index = this._keys.indexOf(evt.keyCode);
+
+                        if (index >= 0) {
+                            this._keys.splice(index, 1);
+                        }
+
+                        if (evt.preventDefault) {
+                            if (!noPreventDefault) {
+                                evt.preventDefault();
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    /**
+     * Detach the current controls from the specified dom element.
+     */
+    public detachControl(): void {
+        if (this._scene) {
+            if (this._onKeyboardObserver) {
+                this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);
+            }
+            if (this._onCanvasBlurObserver) {
+                this._engine.onCanvasBlurObservable.remove(this._onCanvasBlurObserver);
+            }
+            this._onKeyboardObserver = null;
+            this._onCanvasBlurObserver = null;
+        }
+
+        this._keys.length = 0;
+    }
+
+    /**
+     * Update the current camera state depending on the inputs that have been used this frame.
+     * This is a dynamically created lambda to avoid the performance penalty of looping for inputs in the render loop.
+     */
+    public checkInputs(): void {
+        if (this._onKeyboardObserver) {
+            const camera = this.camera;
+
+            for (let index = 0; index < this._keys.length; index++) {
+                const keyCode = this._keys[index];
+                if (this._ctrlPressed) {
+                    // Rotation
+                    if (this.keysLeft.indexOf(keyCode) !== -1) {
+                        camera.movement.rotationAccumulatedPixels.y -= this.rotationSensitivity;
+                    } else if (this.keysRight.indexOf(keyCode) !== -1) {
+                        camera.movement.rotationAccumulatedPixels.y += this.rotationSensitivity;
+                    } else if (this.keysUp.indexOf(keyCode) !== -1) {
+                        camera.movement.rotationAccumulatedPixels.x -= this.rotationSensitivity;
+                    } else if (this.keysDown.indexOf(keyCode) !== -1) {
+                        camera.movement.rotationAccumulatedPixels.x += this.rotationSensitivity;
+                    }
+                } else {
+                    // Zoom
+                    if (this.keysZoomIn.indexOf(keyCode) !== -1) {
+                        camera.movement.zoomAccumulatedPixels += this.zoomSensitivity;
+                    } else if (this.keysZoomOut.indexOf(keyCode) !== -1) {
+                        camera.movement.zoomAccumulatedPixels -= this.zoomSensitivity;
+                    } else {
+                        // Call into movement class handleDrag so that behavior matches that of pointer input, simulating drag from center of screen
+                        const centerX = this._engine.getRenderWidth() / 2;
+                        const centerY = this._engine.getRenderHeight() / 2;
+                        camera.movement.startDrag(centerX, centerY);
+                        if (this.keysLeft.indexOf(keyCode) !== -1) {
+                            camera.movement.handleDrag(centerX - this.panSensitivity, centerY);
+                        } else if (this.keysRight.indexOf(keyCode) !== -1) {
+                            camera.movement.handleDrag(centerX + this.panSensitivity, centerY);
+                        } else if (this.keysUp.indexOf(keyCode) !== -1) {
+                            camera.movement.handleDrag(centerX, centerY + this.panSensitivity);
+                        } else if (this.keysDown.indexOf(keyCode) !== -1) {
+                            camera.movement.handleDrag(centerX, centerY - this.panSensitivity);
+                        }
+                        camera.movement.stopDrag();
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Gets the class name of the current input.
+     * @returns the class name
+     */
+    public getClassName(): string {
+        return "GeospatialCameraKeyboardInput";
+    }
+
+    /**
+     * Get the friendly name associated with the input class.
+     * @returns the input friendly name
+     */
+    public getSimpleName(): string {
+        return "keyboard";
+    }
+}
+
+(<any>CameraInputTypes)["GeospatialCameraKeyboardInput"] = GeospatialCameraKeyboardInput;

packages/dev/core/src/Cameras/Inputs/geospatialCameraPointersInput.ts

@@ -48,10 +48,10 @@ export class GeospatialCameraPointersInput extends OrbitCameraPointersInput {
     public override onTouch(point: Nullable<PointerTouch>, offsetX: number, offsetY: number): void {
         // Single finger touch (no button property) or left button (button 0) = drag
         const button = point?.button ?? 0; // Default to button 0 (drag) if undefined
-
+        const scene = this.camera.getScene();
         switch (button) {
             case 0: // Left button / single touch - drag/pan globe under cursor
-                this._handleDrag();
+                this.camera.movement.handleDrag(scene.pointerX, scene.pointerY);
                 break;
             case 1: // Middle button - tilt camera
             case 2: // Right button - tilt camera
@@ -60,6 +60,15 @@ export class GeospatialCameraPointersInput extends OrbitCameraPointersInput {
         }
     }
 
+    /**
+     * Move camera from multitouch (pinch) zoom distances.
+     * @param previousPinchSquaredDistance
+     * @param pinchSquaredDistance
+     */
+    protected override _computePinchZoom(previousPinchSquaredDistance: number, pinchSquaredDistance: number): void {
+        this.camera.radius = (this.camera.radius * Math.sqrt(previousPinchSquaredDistance)) / Math.sqrt(pinchSquaredDistance);
+    }
+
     /**
      * Move camera from multi touch panning positions.
      * In geospatialcamera, multi touch panning tilts the globe (whereas single touch will pan/drag it)
@@ -94,11 +103,6 @@ export class GeospatialCameraPointersInput extends OrbitCameraPointersInput {
         super.onButtonUp(_evt);
     }
 
-    private _handleDrag(): void {
-        const scene = this.camera.getScene();
-        this.camera.movement.handleDrag(scene.pointerX, scene.pointerY);
-    }
-
     private _handleTilt(deltaX: number, deltaY: number): void {
         this.camera.movement.rotationAccumulatedPixels.y -= deltaX; // yaw - looking side to side
         this.camera.movement.rotationAccumulatedPixels.x -= deltaY; // pitch - look up towards sky / down towards ground

packages/dev/core/src/Cameras/geospatialCamera.ts

@@ -47,7 +47,7 @@ export class GeospatialCamera extends Camera {
 
         this.pickPredicate = pickPredicate;
         this.inputs = new GeospatialCameraInputsManager(this);
-        this.inputs.addMouse().addMouseWheel();
+        this.inputs.addMouse().addMouseWheel().addKeyboard();
     }
 
     private _center: Vector3 = new Vector3();

packages/dev/core/src/Cameras/geospatialCameraInputsManager.ts

@@ -2,6 +2,7 @@ import { CameraInputsManager } from "./cameraInputsManager";
 import type { GeospatialCamera } from "./geospatialCamera";
 import { GeospatialCameraPointersInput } from "./Inputs/geospatialCameraPointersInput";
 import { GeospatialCameraMouseWheelInput } from "./Inputs/geospatialCameraMouseWheelInput";
+import { GeospatialCameraKeyboardInput } from "./Inputs/geospatialCameraKeyboardInput";
 
 /**
  * Default Inputs manager for the GeospatialCamera.
@@ -33,4 +34,13 @@ export class GeospatialCameraInputsManager extends CameraInputsManager<Geospatia
         this.add(new GeospatialCameraMouseWheelInput());
         return this;
     }
+
+    /**
+     * Add mouse wheel input support to the input manager
+     * @returns the current input manager
+     */
+    public addKeyboard(): GeospatialCameraInputsManager {
+        this.add(new GeospatialCameraKeyboardInput());
+        return this;
+    }
 }