Implement Bike mode

Implements a "bike" or "vehicle" mode.
Default speed resembles more a bike, when holding
'shift' the speed is more a car.

Sticks the camera at height 2 from the ground.

Author: schuellerf

src/app/Config.ts

@@ -10,6 +10,7 @@ const Config = {
 	MaxCameraDistance: 4000,
 	SlippyMapTransitionDuration: 400,
 	MinFreeCameraHeight: 10,
+	FreeCameraBikeHeight: 2,
 	CameraZoomSmoothing: 0.4,
 	CameraZoomSpeed: 0.0005,
 	CameraZoomTrackpadFactor: 4,
@@ -21,6 +22,10 @@ const Config = {
 	GroundCameraSpeedFast: 1200,
 	FreeCameraSpeed: 400,
 	FreeCameraSpeedFast: 1200,
+	BikeCameraSpeed: 10,
+	BikeCameraSpeedFast: 50,
+	BikeCameraNear: 1,
+	CameraNear: 10,
 	FreeCameraRotationSensitivity: 0.00002,
 	FreeCameraYawSpeed: 0.8,
 	FreeCameraPitchSpeed: 0.8,

src/app/controls/FreeControlsNavigator.ts

@@ -21,6 +21,7 @@ export default class FreeControlsNavigator extends ControlsNavigator {
 	private yawMinusKeyPressed: boolean = false;
 	private yawPlusKeyPressed: boolean = false;
 	private pointerLocked: boolean = false;
+	private bikeMode: boolean = false;
 
 	public constructor(
 		element: HTMLElement,
@@ -216,11 +217,18 @@ export default class FreeControlsNavigator extends ControlsNavigator {
 		};
 	}
 
+	public setBikeMode(bikeMode: boolean): void {
+		this.bikeMode = bikeMode;
+	}
+
 	public update(deltaTime: number): void {
 		const mat = this.camera.matrixWorld.values;
 		const forwardDir = Vec3.normalize(new Vec3(mat[8], mat[9], mat[10]));
 		const rightDir = Vec3.normalize(new Vec3(mat[0], mat[1], mat[2]));
-		const speed = this.fastMovementKeyPressed ? Config.FreeCameraSpeedFast : Config.FreeCameraSpeed;
+		const fastSpeed = this.bikeMode ? Config.BikeCameraSpeedFast : Config.FreeCameraSpeedFast;
+		const slowSpeed = this.bikeMode ? Config.BikeCameraSpeed : Config.FreeCameraSpeed;
+
+		const speed = this.fastMovementKeyPressed ? fastSpeed : slowSpeed;
 
 		let movementDelta = new Vec3();
 		if (this.forwardKeyPressed) {
@@ -242,7 +250,12 @@ export default class FreeControlsNavigator extends ControlsNavigator {
 		this.camera.position.z += movementDelta.z;
 
 		const heightmapValue = this.getHeightmapValueAtPosition(this.camera.position.x, this.camera.position.z);
-		this.camera.position.y = Math.max(this.camera.position.y, heightmapValue + Config.MinFreeCameraHeight);
+		if (this.bikeMode) {
+			this.camera.position.y = heightmapValue + Config.FreeCameraBikeHeight;
+		} else {
+			this.camera.position.y = Math.max(this.camera.position.y, heightmapValue + Config.MinFreeCameraHeight);
+		}
+		
 
 		this.camera.updateMatrix();
 

src/app/controls/GroundControlsNavigator.ts

@@ -48,6 +48,7 @@ export default class GroundControlsNavigator extends ControlsNavigator {
 	public switchToSlippy: boolean = false;
 	private transitionYawFrom: number = 0;
 	private transitionPitchFrom: number = 0;
+	private bikeMode: boolean = false;
 
 	public constructor(
 		element: HTMLElement,
@@ -335,8 +336,13 @@ export default class GroundControlsNavigator extends ControlsNavigator {
 		}
 	}
 
+	public setBikeMode(bikeMode: boolean): void {
+		this.bikeMode = bikeMode;
+		this.updateCameraProjectionMatrix();
+	}
+
 	private updateCameraProjectionMatrix(): void {
-		this.camera.near = 10;
+		this.camera.near = this.bikeMode ? Config.BikeCameraNear : Config.CameraNear;
 		this.camera.far = 100000;
 		this.camera.updateProjectionMatrix();
 	}

src/app/systems/ControlsSystem.ts

@@ -32,6 +32,7 @@ export enum NavigationMode {
 export default class ControlsSystem extends System {
 	private readonly element: HTMLElement;
 	public mode: NavigationMode = NavigationMode.Ground;
+	public bikeMode: boolean = false;
 	private camera: PerspectiveCamera;
 	private tick: number = 0;
 	public target: Vec3 = new Vec3();
@@ -179,7 +180,21 @@ export default class ControlsSystem extends System {
 				this.freeNavigator.enable();
 				this.freeNavigator.syncWithCamera(this.groundNavigator);
 			}
+		} else if (e.code === 'KeyB') {
+			e.preventDefault();
+
+			this.bikeMode = !this.bikeMode;
+
+			this.freeNavigator.setBikeMode(this.bikeMode);
+			this.groundNavigator.setBikeMode(this.bikeMode);
+
+			this.mode = NavigationMode.Free;
+			this.activeNavigator = this.freeNavigator;
+			this.groundNavigator.disable();
+			this.freeNavigator.enable();
+			this.freeNavigator.syncWithCamera(this.groundNavigator);
 		}
+
 	}
 
 	private mouseDownEvent(e: MouseEvent): void {

src/app/ui/components/InfoModalPanel/InfoModalPanel.tsx

@@ -29,6 +29,9 @@ const KeysConfig: {keys: JSX.Element; desc: string}[] = [
 	}, {
 		keys: <Key text='Tab'/>,
 		desc: 'Toggle between ground camera mode (default) and free camera mode'
+	}, {
+		keys: <Key text='B'/>,
+		desc: 'Toggle between bike and free camera mode'
 	}, {
 		keys: <><Key text='Ctrl'/> + <Key text='P'/></>,
 		desc: 'Purge all loaded tiles'