@xeokit/xeokit-sdk 2.5.2-beta-10 → 2.5.2-beta-13

package/src/src/viewer/scene/CameraControl/lib/controllers/PivotController.js

@@ -0,0 +1,384 @@
+import { math } from "../../../math/math.js";
+import { PhongMaterial } from "../../../materials/PhongMaterial.js";
+import { Mesh } from "../../../mesh/Mesh.js";
+import { VBOGeometry } from "../../../geometry/VBOGeometry.js";
+import { buildSphereGeometry } from "../../../geometry/builders/buildSphereGeometry.js";
+import { worldToRTCPos } from "../../../math/rtcCoords.js";
+
+const tempVec3a = math.vec3();
+const tempVec3b = math.vec3();
+const tempVec3c = math.vec3();
+
+const tempVec4a = math.vec4();
+const tempVec4b = math.vec4();
+const tempVec4c = math.vec4();
+
+
+/** @private */
+class PivotController {
+
+    /**
+     * @private
+     */
+    constructor(scene, configs) {
+
+        // Pivot math by: http://www.derschmale.com/
+
+        this._scene = scene;
+        this._configs = configs;
+        this._pivotWorldPos = math.vec3();
+        this._cameraOffset = math.vec3();
+        this._azimuth = 0;
+        this._polar = 0;
+        this._radius = 0;
+        this._pivotPosSet = false; // Initially false, true as soon as _pivotWorldPos has been set to some value
+        this._pivoting = false; // True while pivoting
+        this._shown = false;
+
+        this._pivotSphereEnabled = false;
+        this._pivotSphere = null;
+        this._pivotSphereSize = 1;
+        this._pivotSphereGeometry = null;
+        this._pivotSphereMaterial = null;
+        this._rtcCenter = math.vec3();
+        this._rtcPos = math.vec3();
+
+        this._pivotViewPos = math.vec4();
+        this._pivotProjPos = math.vec4();
+        this._pivotCanvasPos = math.vec2();
+        this._cameraDirty = true;
+
+        this._onViewMatrix = this._scene.camera.on("viewMatrix", () => {
+            this._cameraDirty = true;
+        });
+
+        this._onProjMatrix = this._scene.camera.on("projMatrix", () => {
+            this._cameraDirty = true;
+        });
+
+        this._onTick = this._scene.on("tick", () => {
+            this.updatePivotElement();
+            this.updatePivotSphere();
+        });
+    }
+
+    createPivotSphere() {
+        const currentPos = this.getPivotPos();
+        const cameraPos = math.vec3();
+        math.decomposeMat4(math.inverseMat4(this._scene.viewer.camera.viewMatrix, math.mat4()), cameraPos, math.vec4(), math.vec3());
+        const length = math.distVec3(cameraPos, currentPos);
+        let radius = (Math.tan(Math.PI / 500) * length) * this._pivotSphereSize;
+
+        if (this._scene.camera.projection == "ortho") {
+            radius /= (this._scene.camera.ortho.scale / 2);
+        }
+
+        worldToRTCPos(currentPos, this._rtcCenter, this._rtcPos);
+        this._pivotSphereGeometry = new VBOGeometry(
+            this._scene,
+            buildSphereGeometry({ radius })
+        );
+        this._pivotSphere = new Mesh(this._scene, {
+            geometry: this._pivotSphereGeometry,
+            material: this._pivotSphereMaterial,
+            pickable: false,
+            position: this._rtcPos,
+            rtcCenter: this._rtcCenter
+        });
+    };
+
+    destroyPivotSphere() {
+        if (this._pivotSphere) {
+            this._pivotSphere.destroy();
+            this._pivotSphere = null;
+        }
+        if (this._pivotSphereGeometry) {
+            this._pivotSphereGeometry.destroy();
+            this._pivotSphereGeometry = null;
+        }
+    }
+
+    updatePivotElement() {
+
+        const camera = this._scene.camera;
+        const canvas = this._scene.canvas;
+
+        if (this._pivoting && this._cameraDirty) {
+
+            math.transformPoint3(camera.viewMatrix, this.getPivotPos(), this._pivotViewPos);
+            this._pivotViewPos[3] = 1;
+            math.transformPoint4(camera.projMatrix, this._pivotViewPos, this._pivotProjPos);
+
+            const canvasAABB = canvas.boundary;
+            const canvasWidth = canvasAABB[2];
+            const canvasHeight = canvasAABB[3];
+
+            this._pivotCanvasPos[0] = Math.floor((1 + this._pivotProjPos[0] / this._pivotProjPos[3]) * canvasWidth / 2);
+            this._pivotCanvasPos[1] = Math.floor((1 - this._pivotProjPos[1] / this._pivotProjPos[3]) * canvasHeight / 2);
+
+            // data-textures: avoid to do continuous DOM layout calculations            
+            let canvasBoundingRect = canvas._lastBoundingClientRect;
+
+            if (!canvasBoundingRect || canvas._canvasSizeChanged)
+            {
+                const canvasElem = canvas.canvas;
+
+                canvasBoundingRect = canvas._lastBoundingClientRect = canvasElem.getBoundingClientRect ();
+            }
+
+            if (this._pivotElement) {
+                this._pivotElement.style.left = (Math.floor(canvasBoundingRect.left + this._pivotCanvasPos[0]) - (this._pivotElement.clientWidth / 2) + window.scrollX) + "px";
+                this._pivotElement.style.top = (Math.floor(canvasBoundingRect.top + this._pivotCanvasPos[1]) - (this._pivotElement.clientHeight / 2) + window.scrollY) + "px";
+            }
+            this._cameraDirty = false;
+        }
+    }
+
+    updatePivotSphere() {
+        if (this._pivoting && this._pivotSphere) {
+            worldToRTCPos(this.getPivotPos(), this._rtcCenter, this._rtcPos);
+            if(!math.compareVec3(this._rtcPos, this._pivotSphere.position)) {
+                this.destroyPivotSphere();
+                this.createPivotSphere();
+            }
+        }
+    }
+    /**
+     * Sets the HTML DOM element that will represent the pivot position.
+     *
+     * @param pivotElement
+     */
+    setPivotElement(pivotElement) {
+        this._pivotElement = pivotElement;
+    }
+
+    /**
+     * Sets a sphere as the representation of the pivot position.
+     *
+     * @param {Object} [cfg] Sphere configuration.
+     * @param {String} [cfg.size=1] Optional size factor of the sphere. Defaults to 1.
+     * @param {String} [cfg.color=Array] Optional maretial color. Defaults to a red.
+     */
+    enablePivotSphere(cfg = {}) {
+        this.destroyPivotSphere();
+        this._pivotSphereEnabled = true;
+        if (cfg.size) {
+            this._pivotSphereSize = cfg.size;
+        }
+        const color = cfg.color || [1, 0, 0];
+        this._pivotSphereMaterial = new PhongMaterial(this._scene, {
+            emissive: color,
+            ambient: color,
+            specular: [0,0,0],
+            diffuse: [0,0,0],
+        });
+    }
+
+    /**
+     * Remove the sphere as the representation of the pivot position.
+     *
+     */
+    disablePivotSphere() {
+        this.destroyPivotSphere();
+        this._pivotSphereEnabled = false;
+    }
+
+    /**
+     * Begins pivoting.
+     */
+    startPivot() {
+
+        if (this._cameraLookingDownwards()) {
+            this._pivoting = false;
+            return false;
+        }
+
+        const camera = this._scene.camera;
+
+        let lookat = math.lookAtMat4v(camera.eye, camera.look, camera.worldUp);
+        math.transformPoint3(lookat, this.getPivotPos(), this._cameraOffset);
+
+        const pivotPos = this.getPivotPos();
+        this._cameraOffset[2] += math.distVec3(camera.eye, pivotPos);
+
+        lookat = math.inverseMat4(lookat);
+
+        const offset = math.transformVec3(lookat, this._cameraOffset);
+        const diff = math.vec3();
+
+        math.subVec3(camera.eye, pivotPos, diff);
+        math.addVec3(diff, offset);
+
+        if (camera.zUp) {
+            const t = diff[1];
+            diff[1] = diff[2];
+            diff[2] = t;
+        }
+
+        this._radius = math.lenVec3(diff);
+        this._polar = Math.acos(diff[1] / this._radius);
+        this._azimuth = Math.atan2(diff[0], diff[2]);
+        this._pivoting = true;
+    }
+
+    _cameraLookingDownwards() { // Returns true if angle between camera viewing direction and World-space "up" axis is too small
+        const camera = this._scene.camera;
+        const forwardAxis = math.normalizeVec3(math.subVec3(camera.look, camera.eye, tempVec3a));
+        const rightAxis = math.cross3Vec3(forwardAxis, camera.worldUp, tempVec3b);
+        let rightAxisLen = math.sqLenVec3(rightAxis);
+        return (rightAxisLen <= 0.0001);
+    }
+
+    /**
+     * Returns true if we are currently pivoting.
+     *
+     * @returns {Boolean}
+     */
+    getPivoting() {
+        return this._pivoting;
+    }
+
+    /**
+     * Sets a 3D World-space position to pivot about.
+     *
+     * @param {Number[]} worldPos The new World-space pivot position.
+     */
+    setPivotPos(worldPos) {
+        this._pivotWorldPos.set(worldPos);
+        this._pivotPosSet = true;
+    }
+
+    /**
+     * Sets the pivot position to the 3D projection of the given 2D canvas coordinates on a sphere centered
+     * at the viewpoint. The radius of the sphere is configured via {@link CameraControl#smartPivot}.
+     *
+     *
+     * @param canvasPos
+     */
+    setCanvasPivotPos(canvasPos) {
+        const camera = this._scene.camera;
+        const pivotShereRadius = Math.abs(math.distVec3(this._scene.center, camera.eye));
+        const transposedProjectMat = camera.project.transposedMatrix;
+        const Pt3 = transposedProjectMat.subarray(8, 12);
+        const Pt4 = transposedProjectMat.subarray(12);
+        const D = [0, 0, -1.0, 1];
+        const screenZ = math.dotVec4(D, Pt3) / math.dotVec4(D, Pt4);
+        const worldPos = tempVec4a;
+        camera.project.unproject(canvasPos, screenZ, tempVec4b, tempVec4c, worldPos);
+        const eyeWorldPosVec = math.normalizeVec3(math.subVec3(worldPos, camera.eye, tempVec3a));
+        const posOnSphere = math.addVec3(camera.eye, math.mulVec3Scalar(eyeWorldPosVec, pivotShereRadius, tempVec3b), tempVec3c);
+        this.setPivotPos(posOnSphere);
+    }
+
+    /**
+     * Gets the current position we're pivoting about.
+     * @returns {Number[]} The current World-space pivot position.
+     */
+    getPivotPos() {
+        return (this._pivotPosSet) ? this._pivotWorldPos : this._scene.camera.look; // Avoid pivoting about [0,0,0] by default
+    }
+
+    /**
+     * Continues to pivot.
+     *
+     * @param {Number} yawInc Yaw rotation increment.
+     * @param {Number} pitchInc Pitch rotation increment.
+     */
+    continuePivot(yawInc, pitchInc) {
+        if (!this._pivoting) {
+            return;
+        }
+        if (yawInc === 0 && pitchInc === 0) {
+            return;
+        }
+        const camera = this._scene.camera;
+        var dx = -yawInc;
+        const dy = -pitchInc;
+        if (camera.worldUp[2] === 1) {
+            dx = -dx;
+        }
+        this._azimuth += -dx * .01;
+        this._polar += dy * .01;
+        this._polar = math.clamp(this._polar, .001, Math.PI - .001);
+        const pos = [
+            this._radius * Math.sin(this._polar) * Math.sin(this._azimuth),
+            this._radius * Math.cos(this._polar),
+            this._radius * Math.sin(this._polar) * Math.cos(this._azimuth)
+        ];
+        if (camera.worldUp[2] === 1) {
+            const t = pos[1];
+            pos[1] = pos[2];
+            pos[2] = t;
+        }
+        // Preserve the eye->look distance, since in xeokit "look" is the point-of-interest, not the direction vector.
+        const eyeLookLen = math.lenVec3(math.subVec3(camera.look, camera.eye, math.vec3()));
+        const pivotPos = this.getPivotPos();
+        math.addVec3(pos, pivotPos);
+        let lookat = math.lookAtMat4v(pos, pivotPos, camera.worldUp);
+        lookat = math.inverseMat4(lookat);
+        const offset = math.transformVec3(lookat, this._cameraOffset);
+        lookat[12] -= offset[0];
+        lookat[13] -= offset[1];
+        lookat[14] -= offset[2];
+        const zAxis = [lookat[8], lookat[9], lookat[10]];
+        camera.eye = [lookat[12], lookat[13], lookat[14]];
+        math.subVec3(camera.eye, math.mulVec3Scalar(zAxis, eyeLookLen), camera.look);
+        camera.up = [lookat[4], lookat[5], lookat[6]];
+        this.showPivot();
+    }
+
+    /**
+     * Shows the pivot position.
+     *
+     * Only works if we set an  HTML DOM element to represent the pivot position.
+     */
+    showPivot() {
+        if (this._shown) {
+            return;
+        }
+        if (this._pivotElement) {
+            this.updatePivotElement();
+            this._pivotElement.style.visibility = "visible";
+        }
+        if (this._pivotSphereEnabled) {
+            this.destroyPivotSphere();
+            this.createPivotSphere();
+        }
+        this._shown = true;
+    }
+
+    /**
+     * Hides the pivot position.
+     *
+     * Only works if we set an  HTML DOM element to represent the pivot position.
+     */
+    hidePivot() {
+        if (!this._shown) {
+            return;
+        }
+        if (this._pivotElement) {
+            this._pivotElement.style.visibility = "hidden";
+        }
+        if (this._pivotSphereEnabled) {
+            this.destroyPivotSphere();
+        }
+        this._shown = false;
+    }
+
+    /**
+     * Finishes pivoting.
+     */
+    endPivot() {
+        this._pivoting = false;
+    }
+
+    destroy() {
+        this.destroyPivotSphere();
+        this._scene.camera.off(this._onViewMatrix);
+        this._scene.camera.off(this._onProjMatrix);
+        this._scene.off(this._onTick);
+    }
+}
+
+
+export {PivotController};

package/src/src/viewer/scene/CameraControl/lib/handlers/KeyboardAxisViewHandler.js

@@ -0,0 +1,122 @@
+import {math} from "../../../math/math.js";
+
+const center = math.vec3();
+const tempVec3a = math.vec3();
+const tempVec3b = math.vec3();
+const tempVec3c = math.vec3();
+const tempVec3d = math.vec3();
+
+const tempCameraTarget = {
+    eye: math.vec3(),
+    look: math.vec3(),
+    up: math.vec3()
+};
+
+/**
+ * @private
+ */
+class KeyboardAxisViewHandler {
+
+    constructor(scene, controllers, configs, states) {
+
+        this._scene = scene;
+        const cameraControl = controllers.cameraControl;
+        const camera = scene.camera;
+
+        this._onSceneKeyDown = scene.input.on("keydown", () => {
+
+            if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
+                return;
+            }
+
+            if (!states.mouseover) {
+                return;
+            }
+
+            const axisViewRight = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_RIGHT);
+            const axisViewBack = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_BACK);
+            const axisViewLeft = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_LEFT);
+            const axisViewFront = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_FRONT);
+            const axisViewTop = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_TOP);
+            const axisViewBottom = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_BOTTOM);
+
+            if ((!axisViewRight) && (!axisViewBack) && (!axisViewLeft) && (!axisViewFront) && (!axisViewTop) && (!axisViewBottom)) {
+                return;
+            }
+
+            const aabb = scene.aabb;
+            const diag = math.getAABB3Diag(aabb);
+
+            math.getAABB3Center(aabb, center);
+
+            const perspectiveDist = Math.abs(diag / Math.tan(controllers.cameraFlight.fitFOV * math.DEGTORAD));
+            const orthoScale = diag * 1.1;
+
+            tempCameraTarget.orthoScale = orthoScale;
+
+            if (axisViewRight) {
+
+                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldRight, perspectiveDist, tempVec3a), tempVec3d));
+                tempCameraTarget.look.set(center);
+                tempCameraTarget.up.set(camera.worldUp);
+
+            } else if (axisViewBack) {
+
+                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldForward, perspectiveDist, tempVec3a), tempVec3d));
+                tempCameraTarget.look.set(center);
+                tempCameraTarget.up.set(camera.worldUp);
+
+            } else if (axisViewLeft) {
+
+                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldRight, -perspectiveDist, tempVec3a), tempVec3d));
+                tempCameraTarget.look.set(center);
+                tempCameraTarget.up.set(camera.worldUp);
+
+            } else if (axisViewFront) {
+
+                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldForward, -perspectiveDist, tempVec3a), tempVec3d));
+                tempCameraTarget.look.set(center);
+                tempCameraTarget.up.set(camera.worldUp);
+
+            } else if (axisViewTop) {
+
+                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldUp, perspectiveDist, tempVec3a), tempVec3d));
+                tempCameraTarget.look.set(center);
+                tempCameraTarget.up.set(math.normalizeVec3(math.mulVec3Scalar(camera.worldForward, 1, tempVec3b), tempVec3c));
+
+            } else if (axisViewBottom) {
+
+                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldUp, -perspectiveDist, tempVec3a), tempVec3d));
+                tempCameraTarget.look.set(center);
+                tempCameraTarget.up.set(math.normalizeVec3(math.mulVec3Scalar(camera.worldForward, -1, tempVec3b)));
+            }
+
+            if ((!configs.firstPerson) && configs.followPointer) {
+                controllers.pivotController.setPivotPos(center);
+            }
+
+            if (controllers.cameraFlight.duration > 0) {
+                controllers.cameraFlight.flyTo(tempCameraTarget, () => {
+                    if (controllers.pivotController.getPivoting() && configs.followPointer) {
+                        controllers.pivotController.showPivot();
+                    }
+                });
+
+            } else {
+                controllers.cameraFlight.jumpTo(tempCameraTarget);
+                if (controllers.pivotController.getPivoting() && configs.followPointer) {
+                    controllers.pivotController.showPivot();
+                }
+            }
+        });
+    }
+
+    reset() {
+    }
+
+    destroy() {
+        this._scene.input.off(this._onSceneKeyDown);
+    }
+}
+
+export {KeyboardAxisViewHandler};

package/src/src/viewer/scene/CameraControl/lib/handlers/KeyboardPanRotateDollyHandler.js

@@ -0,0 +1,183 @@
+/**
+ * @private
+ */
+class KeyboardPanRotateDollyHandler {
+
+    constructor(scene, controllers, configs, states, updates) {
+
+        this._scene = scene;
+        const input = scene.input;
+
+        const keyDownMap = [];
+
+        const canvas = scene.canvas.canvas;
+
+        let mouseMovedSinceLastKeyboardDolly = true;
+
+        this._onSceneMouseMove = input.on("mousemove", () => {
+            mouseMovedSinceLastKeyboardDolly = true;
+        });
+
+        this._onSceneKeyDown = input.on("keydown", (keyCode) => {
+            if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
+                return;
+            }
+            if (!states.mouseover) {
+                return;
+            }
+            keyDownMap[keyCode] = true;
+
+            if (keyCode === input.KEY_SHIFT) {
+                canvas.style.cursor = "move";
+            }
+        });
+
+        this._onSceneKeyUp = input.on("keyup", (keyCode) => {
+            if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
+                return;
+            }
+            keyDownMap[keyCode] = false;
+
+            if (keyCode === input.KEY_SHIFT) {
+                canvas.style.cursor = null;
+            }
+
+            if (controllers.pivotController.getPivoting()) {
+                controllers.pivotController.endPivot()
+            }
+        });
+
+        this._onTick = scene.on("tick", (e) => {
+
+            if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
+                return;
+            }
+
+            if (!states.mouseover) {
+                return;
+            }
+
+            const cameraControl = controllers.cameraControl;
+            const elapsedSecs = (e.deltaTime / 1000.0);
+
+            //-------------------------------------------------------------------------------------------------
+            // Keyboard rotation
+            //-------------------------------------------------------------------------------------------------
+
+            if (!configs.planView) {
+
+                const rotateYPos = cameraControl._isKeyDownForAction(cameraControl.ROTATE_Y_POS, keyDownMap);
+                const rotateYNeg = cameraControl._isKeyDownForAction(cameraControl.ROTATE_Y_NEG, keyDownMap);
+                const rotateXPos = cameraControl._isKeyDownForAction(cameraControl.ROTATE_X_POS, keyDownMap);
+                const rotateXNeg = cameraControl._isKeyDownForAction(cameraControl.ROTATE_X_NEG, keyDownMap);
+
+                const orbitDelta = elapsedSecs * configs.keyboardRotationRate;
+
+                if (rotateYPos || rotateYNeg || rotateXPos || rotateXNeg) {
+
+                    if ((!configs.firstPerson) && configs.followPointer) {
+                        controllers.pivotController.startPivot();
+                    }
+
+                    if (rotateYPos) {
+                        updates.rotateDeltaY += orbitDelta;
+
+                    } else if (rotateYNeg) {
+                        updates.rotateDeltaY -= orbitDelta;
+                    }
+
+                    if (rotateXPos) {
+                        updates.rotateDeltaX += orbitDelta;
+
+                    } else if (rotateXNeg) {
+                        updates.rotateDeltaX -= orbitDelta;
+                    }
+
+                    if ((!configs.firstPerson) && configs.followPointer) {
+                        controllers.pivotController.startPivot();
+                    }
+                }
+            }
+
+            //-------------------------------------------------------------------------------------------------
+            // Keyboard panning
+            //-------------------------------------------------------------------------------------------------
+
+            if (!keyDownMap[input.KEY_CTRL] && !keyDownMap[input.KEY_ALT]) {
+
+                const dollyBackwards = cameraControl._isKeyDownForAction(cameraControl.DOLLY_BACKWARDS, keyDownMap);
+                const dollyForwards = cameraControl._isKeyDownForAction(cameraControl.DOLLY_FORWARDS, keyDownMap);
+
+                if (dollyBackwards || dollyForwards) {
+
+                    const dollyDelta = elapsedSecs * configs.keyboardDollyRate;
+
+                    if ((!configs.firstPerson) && configs.followPointer) {
+                        controllers.pivotController.startPivot();
+                    }
+                    if (dollyForwards) {
+                        updates.dollyDelta -= dollyDelta;
+                    } else if (dollyBackwards) {
+                        updates.dollyDelta += dollyDelta;
+                    }
+
+                    if (mouseMovedSinceLastKeyboardDolly) {
+                        states.followPointerDirty = true;
+                        mouseMovedSinceLastKeyboardDolly = false;
+                    }
+                }
+            }
+
+            const panForwards = cameraControl._isKeyDownForAction(cameraControl.PAN_FORWARDS, keyDownMap);
+            const panBackwards = cameraControl._isKeyDownForAction(cameraControl.PAN_BACKWARDS, keyDownMap);
+            const panLeft = cameraControl._isKeyDownForAction(cameraControl.PAN_LEFT, keyDownMap);
+            const panRight = cameraControl._isKeyDownForAction(cameraControl.PAN_RIGHT, keyDownMap);
+            const panUp = cameraControl._isKeyDownForAction(cameraControl.PAN_UP, keyDownMap);
+            const panDown = cameraControl._isKeyDownForAction(cameraControl.PAN_DOWN, keyDownMap);
+
+            const panDelta = (keyDownMap[input.KEY_ALT] ? 0.3 : 1.0) * elapsedSecs * configs.keyboardPanRate; // ALT for slower pan rate
+
+            if (panForwards || panBackwards || panLeft || panRight || panUp || panDown) {
+
+                if ((!configs.firstPerson) && configs.followPointer) {
+                    controllers.pivotController.startPivot();
+                }
+
+                if (panDown) {
+                    updates.panDeltaY += panDelta;
+
+                } else if (panUp) {
+                    updates.panDeltaY += -panDelta;
+                }
+
+                if (panRight) {
+                    updates.panDeltaX += -panDelta;
+
+                } else if (panLeft) {
+                    updates.panDeltaX += panDelta;
+                }
+
+                if (panBackwards) {
+                    updates.panDeltaZ += panDelta;
+
+                } else if (panForwards) {
+                    updates.panDeltaZ += -panDelta;
+                }
+            }
+        });
+    }
+
+    reset() {
+    }
+
+    destroy() {
+
+        this._scene.off(this._onTick);
+
+        this._scene.input.off(this._onSceneMouseMove);
+        this._scene.input.off(this._onSceneKeyDown);
+        this._scene.input.off(this._onSceneKeyUp);
+    }
+}
+
+export {KeyboardPanRotateDollyHandler};