camera control done

src/client/camera.ts

@@ -0,0 +1,41 @@
+// @ts-ignore
+import mat4 from 'gl-mat4';
+
+/**
+ * Updates the camera position depending on keyboard input
+ * @param {any} context the program context
+ */
+export function updateCamera(context: any) {
+	const xMat = mat4.create();
+	mat4.rotateY(xMat, xMat, context.params.camRot.y);
+	mat4.rotateX(xMat, xMat, context.params.camRot.x);
+	const zMat = mat4.create();
+	mat4.rotateY(zMat, zMat, context.params.camRot.y);
+	mat4.rotateX(zMat, zMat, context.params.camRot.x);
+	if (context.params.keyboard.a) {
+		context.params.camPos.x += xMat[0];
+		context.params.camPos.y += xMat[4];
+		context.params.camPos.z += xMat[8];
+	}
+	if (context.params.keyboard.d) {
+		context.params.camPos.x -= xMat[0];
+		context.params.camPos.y -= xMat[4];
+		context.params.camPos.z -= xMat[8];
+	}
+	if (context.params.keyboard.space) {
+		context.params.camPos.y -= 1;
+	}
+	if (context.params.keyboard.control) {
+		context.params.camPos.y += 1;
+	}
+	if (context.params.keyboard.w) {
+		context.params.camPos.x += zMat[2];
+		context.params.camPos.y += zMat[6];
+		context.params.camPos.z += zMat[10];
+	}
+	if (context.params.keyboard.s) {
+		context.params.camPos.x -= zMat[2];
+		context.params.camPos.y -= zMat[6];
+		context.params.camPos.z -= zMat[10];
+	}
+}

src/client/init.ts

@@ -39,7 +39,8 @@ export function initParams(context: any) {
 			a: false,
 			s: false,
 			d: false,
-			shift: false,
+			space: false,
+			control: false,
 		},
 	};
 }

src/client/main.ts

@@ -12,6 +12,7 @@ import {uiUpdateParams,
 	uiUpdateObject,
 	uiUpdateShader} from './uijquery';
 import {initUX} from './ux';
+import {updateCamera} from './camera';
 
 main();
 
@@ -60,18 +61,7 @@ async function main() {
 			changed = true;
 		}
 		then = now;
-		if (context.params.keyboard.w) {
+		updateCamera(context);
-			context.params.camPos.z += 1.;
-		}
-		if (context.params.keyboard.s) {
-			context.params.camPos.z -= 1.;
-		}
-		if (context.params.keyboard.a) {
-			context.params.camPos.x += 1.;
-		}
-		if (context.params.keyboard.d) {
-			context.params.camPos.x -= 1.;
-		}
 		drawScene(context.gl,
 			context.programInfo,
 			context.buffers,

src/client/ux.ts

@@ -26,9 +26,6 @@ export function initUX(context: any, canvas: any) {
 		}
 	});
 	$(document).keydown((event) => {
-		if (event.key == 'Shift') {
-			context.params.keyboard.shift = true;
-		}
 		if (event.key == 'w') {
 			context.params.keyboard.w = true;
 		}
@@ -41,11 +38,14 @@ export function initUX(context: any, canvas: any) {
 		if (event.key == 'd') {
 			context.params.keyboard.d = true;
 		}
+		if (event.key == 'Control') {
+			context.params.keyboard.control = true;
+		}
+		if (event.key == ' ') {
+			context.params.keyboard.space = true;
+		}
 	});
 	$(document).keyup((event) => {
-		if (event.key == 'Shift') {
-			context.params.keyboard.shift = false;
-		}
 		if (event.key == 'w') {
 			context.params.keyboard.w = false;
 		}
@@ -58,5 +58,11 @@ export function initUX(context: any, canvas: any) {
 		if (event.key == 'd') {
 			context.params.keyboard.d = false;
 		}
+		if (event.key == 'Control') {
+			context.params.keyboard.control = false;
+		}
+		if (event.key == ' ') {
+			context.params.keyboard.space = false;
+		}
 	});
 }

views/index.ejs

@@ -15,7 +15,8 @@
 			<canvas id='glCanvas' width='640' height='640'></canvas>
 			<div id='ui'>
 				<div class='ui-block'>
-					To control the camera with mouse, click in the canvas, to exit, click again.
+					To control the camera orientation with mouse, click in the canvas, to exit, click again.<br>
+					To control the camera position, use W/S for Z axis, A/D for X axis, and Space/Control for fixed Y axis.
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change shader: </div>