Add support for WASD keyboard controls to the 3D demo
This commit is contained in:
parent
e13f0f7006
commit
6e4f0b0734
|
@ -9,6 +9,8 @@
|
||||||
// except according to those terms.
|
// except according to those terms.
|
||||||
|
|
||||||
import * as glmatrix from 'gl-matrix';
|
import * as glmatrix from 'gl-matrix';
|
||||||
|
import * as _ from 'lodash';
|
||||||
|
|
||||||
import {PathfinderView} from "./view";
|
import {PathfinderView} from "./view";
|
||||||
|
|
||||||
const ORTHOGRAPHIC_ZOOM_SPEED: number = 1.0 / 100.0;
|
const ORTHOGRAPHIC_ZOOM_SPEED: number = 1.0 / 100.0;
|
||||||
|
@ -19,10 +21,21 @@ const ZOOM_OUT_FACTOR: number = 1.0 / ZOOM_IN_FACTOR;
|
||||||
const PERSPECTIVE_MOVEMENT_SPEED: number = 10.0;
|
const PERSPECTIVE_MOVEMENT_SPEED: number = 10.0;
|
||||||
const PERSPECTIVE_ROTATION_SPEED: number = 1.0 / 300.0;
|
const PERSPECTIVE_ROTATION_SPEED: number = 1.0 / 300.0;
|
||||||
|
|
||||||
|
const PERSPECTIVE_MOVEMENT_VECTORS: PerspectiveMovementVectors = _.fromPairs([
|
||||||
|
['W'.charCodeAt(0), glmatrix.vec3.fromValues(0, 0, PERSPECTIVE_MOVEMENT_SPEED)],
|
||||||
|
['A'.charCodeAt(0), glmatrix.vec3.fromValues(PERSPECTIVE_MOVEMENT_SPEED, 0, 0)],
|
||||||
|
['S'.charCodeAt(0), glmatrix.vec3.fromValues(0, 0, -PERSPECTIVE_MOVEMENT_SPEED)],
|
||||||
|
['D'.charCodeAt(0), glmatrix.vec3.fromValues(-PERSPECTIVE_MOVEMENT_SPEED, 0, 0)],
|
||||||
|
]);
|
||||||
|
|
||||||
const MOVEMENT_INTERVAL_DELAY: number = 10;
|
const MOVEMENT_INTERVAL_DELAY: number = 10;
|
||||||
|
|
||||||
const INITIAL_TRANSLATION: glmatrix.vec3 = glmatrix.vec3.fromValues(0.0, 0.0, -1000.0);
|
const INITIAL_TRANSLATION: glmatrix.vec3 = glmatrix.vec3.fromValues(0.0, 0.0, -1000.0);
|
||||||
|
|
||||||
|
interface PerspectiveMovementVectors {
|
||||||
|
[keyCode: number]: glmatrix.vec3;
|
||||||
|
}
|
||||||
|
|
||||||
export abstract class Camera {
|
export abstract class Camera {
|
||||||
constructor(canvas: HTMLCanvasElement) {
|
constructor(canvas: HTMLCanvasElement) {
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
|
@ -137,6 +150,9 @@ export class PerspectiveCamera extends Camera {
|
||||||
this.canvas.addEventListener('mouseup', event => this.onMouseUp(event), false);
|
this.canvas.addEventListener('mouseup', event => this.onMouseUp(event), false);
|
||||||
this.canvas.addEventListener('mousemove', event => this.onMouseMove(event), false);
|
this.canvas.addEventListener('mousemove', event => this.onMouseMove(event), false);
|
||||||
|
|
||||||
|
window.addEventListener('keydown', event => this.onKeyDown(event), false);
|
||||||
|
window.addEventListener('keyup', event => this.onKeyUp(event), false);
|
||||||
|
|
||||||
this.onChange = null;
|
this.onChange = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -150,11 +166,42 @@ export class PerspectiveCamera extends Camera {
|
||||||
if (event.button !== 1)
|
if (event.button !== 1)
|
||||||
this.movementDelta[0] = -this.movementDelta[0];
|
this.movementDelta[0] = -this.movementDelta[0];
|
||||||
|
|
||||||
|
this.startMoving();
|
||||||
|
}
|
||||||
|
|
||||||
|
private onMouseUp(event: MouseEvent): void {
|
||||||
|
this.stopMoving();
|
||||||
|
}
|
||||||
|
|
||||||
|
private onMouseMove(event: MouseEvent): void {
|
||||||
|
if (document.pointerLockElement !== this.canvas)
|
||||||
|
return;
|
||||||
|
|
||||||
|
this.rotation[0] += event.movementX * PERSPECTIVE_ROTATION_SPEED;
|
||||||
|
this.rotation[1] += event.movementY * PERSPECTIVE_ROTATION_SPEED;
|
||||||
|
|
||||||
|
if (this.onChange != null)
|
||||||
|
this.onChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
private onKeyDown(event: KeyboardEvent): void {
|
||||||
|
if (PERSPECTIVE_MOVEMENT_VECTORS.hasOwnProperty(event.keyCode)) {
|
||||||
|
this.movementDelta = glmatrix.vec3.clone(PERSPECTIVE_MOVEMENT_VECTORS[event.keyCode]);
|
||||||
|
this.startMoving();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private onKeyUp(event: KeyboardEvent): void {
|
||||||
|
if (PERSPECTIVE_MOVEMENT_VECTORS.hasOwnProperty(event.keyCode))
|
||||||
|
this.stopMoving();
|
||||||
|
}
|
||||||
|
|
||||||
|
private startMoving(): void {
|
||||||
if (this.movementInterval == null)
|
if (this.movementInterval == null)
|
||||||
this.movementInterval = window.setInterval(() => this.move(), MOVEMENT_INTERVAL_DELAY);
|
this.movementInterval = window.setInterval(() => this.move(), MOVEMENT_INTERVAL_DELAY);
|
||||||
}
|
}
|
||||||
|
|
||||||
private onMouseUp(event: MouseEvent): void {
|
private stopMoving(): void {
|
||||||
if (this.movementInterval != null) {
|
if (this.movementInterval != null) {
|
||||||
window.clearInterval(this.movementInterval);
|
window.clearInterval(this.movementInterval);
|
||||||
this.movementInterval = null;
|
this.movementInterval = null;
|
||||||
|
@ -174,17 +221,6 @@ export class PerspectiveCamera extends Camera {
|
||||||
this.onChange();
|
this.onChange();
|
||||||
}
|
}
|
||||||
|
|
||||||
private onMouseMove(event: MouseEvent): void {
|
|
||||||
if (document.pointerLockElement !== this.canvas)
|
|
||||||
return;
|
|
||||||
|
|
||||||
this.rotation[0] += event.movementX * PERSPECTIVE_ROTATION_SPEED;
|
|
||||||
this.rotation[1] += event.movementY * PERSPECTIVE_ROTATION_SPEED;
|
|
||||||
|
|
||||||
if (this.onChange != null)
|
|
||||||
this.onChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
get rotationMatrix(): glmatrix.mat4 {
|
get rotationMatrix(): glmatrix.mat4 {
|
||||||
const matrix = glmatrix.mat4.create();
|
const matrix = glmatrix.mat4.create();
|
||||||
glmatrix.mat4.fromXRotation(matrix, this.rotation[1]);
|
glmatrix.mat4.fromXRotation(matrix, this.rotation[1]);
|
||||||
|
|
Loading…
Reference in New Issue