From 86e7637e2e7f154f6ed8ab1b2113f04bbe59d301 Mon Sep 17 00:00:00 2001
From: gbrochar <gaetanbrochard@protonmail.com>
Date: Fri, 27 Nov 2020 13:12:24 +0100
Subject: [PATCH] camera control done

---
 src/client/camera.ts | 41 +++++++++++++++++++++++++++++++++++++++++
 src/client/init.ts   |  3 ++-
 src/client/main.ts   | 14 ++------------
 src/client/ux.ts     | 18 ++++++++++++------
 views/index.ejs      |  3 ++-
 5 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 src/client/camera.ts

diff --git a/src/client/camera.ts b/src/client/camera.ts
new file mode 100644
index 0000000..5b7b9ed
--- /dev/null
+++ b/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];
+	}
+}
diff --git a/src/client/init.ts b/src/client/init.ts
index d22dfc7..f9669de 100644
--- a/src/client/init.ts
+++ b/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,
 		},
 	};
 }
diff --git a/src/client/main.ts b/src/client/main.ts
index 8a2e792..af44a39 100644
--- a/src/client/main.ts
+++ b/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) {
-			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.;
-		}
+		updateCamera(context);
 		drawScene(context.gl,
 			context.programInfo,
 			context.buffers,
diff --git a/src/client/ux.ts b/src/client/ux.ts
index 0639700..87d855f 100644
--- a/src/client/ux.ts
+++ b/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;
+		}
 	});
 }
diff --git a/views/index.ejs b/views/index.ejs
index 62838ea..1d6c90a 100644
--- a/views/index.ejs
+++ b/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>