proper mouse camera support

src/client/init.ts

@@ -34,10 +34,6 @@ export function initParams(context: any) {
 			y: 0,
 			z: 0,
 		},
-		mousePrev: {
-			x: null,
-			y: null,
-		},
 		keyboard: {
 			w: false,
 			a: false,

src/client/main.ts

@@ -41,7 +41,6 @@ async function main() {
 
 	const data = await fetchObj('/static/objs/racer.obj');
 	initParams(context);
-	console.log(context.params);
 	updateObj(context, data, true);
 	initShaderProgram(context, vsSource, fsSource4);
 	setProgramInfo(context);
@@ -84,6 +83,6 @@ async function main() {
 	uiUpdateTexture(context);
 	uiUpdateObject(context);
 	uiUpdateShader(context);
-	initUX(context);
+	initUX(context, canvas);
 	requestAnimationFrame(render);
 }

src/client/ux.ts

@@ -3,23 +3,27 @@ import $ from 'jquery';
 /**
  * UI block to update object
  * @param {any} context the program context
+ * @param {any} canvas the HTML canvas
  */
-export function initUX(context: any) {
-	$('#glCanvas').mousemove((event) => {
-		if (context.params.mousePrev.x == null) {
-			context.params.mousePrev.x = event.pageX;
-			context.params.mousePrev.y = event.pageY;
+export function initUX(context: any, canvas: any) {
+	window.addEventListener('mousemove', (e) => {
+		if (document.pointerLockElement === canvas) {
+			context.params.camRot.x += 0.01 * e.movementY;
+			context.params.camRot.y += 0.01 * e.movementX;
+
+			context.params.camRot.x = Math.max(-Math.PI * 0.5,
+				Math.min(context.params.camRot.x, Math.PI * 0.5));
+			context.params.camRot.y += context.params.camRot.y > Math.PI ?
+				-Math.PI * 2 : context.params.camRot.y < -Math.PI ?
+					Math.PI * 2 : 0;
 		}
-		context.params.camRot.y +=
-			(context.params.mousePrev.x - event.pageX) / 100;
-		context.params.camRot.x +=
-			(context.params.mousePrev.y - event.pageY) / 100;
-		context.params.mousePrev.x = event.pageX;
-		context.params.mousePrev.y = event.pageY;
 	});
-	$('#glCanvas').mouseenter((event) => {
-		context.params.mousePrev.x = event.pageX;
-		context.params.mousePrev.y = event.pageY;
+	$('#glCanvas').click(() => {
+		if (document.pointerLockElement === canvas) {
+			document.exitPointerLock();
+		} else {
+			canvas.requestPointerLock();
+		}
 	});
 	$(document).keydown((event) => {
 		if (event.key == 'Shift') {

views/index.ejs

@@ -14,6 +14,9 @@
 		<div id="root">
 			<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.
+				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change shader: </div>
 					<button id='s_blackandwhite'>Black & White</button>