Drag the triangle around

panorama-viewer.js

@@ -47,13 +47,43 @@
 	let program = initShaderProgram(gl);
 	let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
 
-	let rotation = 0;
-	let then = 0;
-	const render = (now) => {
-		const Δtime = (now - then) * 0.001;
-		then = now;
-
+	// Set up mouse-panning state machine.
+	let θy = 0;
+	let θx = 0.25;
+	const PanState = Object.freeze({
+		idle: (event) => {
+			if (event.type === "mousedown") {
+				return PanState.panning;
+			}
+			return PanState.idle;
+		},
+		panning: (event) => {
+			switch (event.type) {
+				case "mouseup":
+					return PanState.idle;
+				case "mouseover":
+					if ((event.buttons & 1) == 0) {
+						return PanState.idle;
+					}
+					break;
+				case "mousemove":
+					θy += event.movementX * 0.025;
+					θx += event.movementY * 0.025;
+					break
+			}
+			return PanState.panning;
+		},
+	});
+	const runPanState = (mouseEvent) => {
+		panState = panState(mouseEvent);
+	}
+	var panState = PanState.idle;
+	viewer.addEventListener("mousedown", runPanState);
+	viewer.addEventListener("mouseup", runPanState);
+	viewer.addEventListener("mouseover", runPanState);
+	viewer.addEventListener("mousemove", runPanState);
 
+	const render = () => {
 		gl.useProgram(program);
 
 		let vertexBuffer = gl.createBuffer();
@@ -67,18 +97,15 @@
 
 		// Create the transformation matrix.
 		let viewMatrix = mat4.create();
-		mat4.rotateX(viewMatrix, viewMatrix, 0.25);
-		mat4.rotateY(viewMatrix, viewMatrix, rotation);
+		mat4.rotateX(viewMatrix, viewMatrix, θx);
+		mat4.rotateY(viewMatrix, viewMatrix, θy);
 		gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);
 
-		
 		let positionLocation = gl.getAttribLocation(program, "position");
 		gl.enableVertexAttribArray(positionLocation);
-		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0);
+		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0);
 		gl.drawArrays(gl.TRIANGLES, 0, 3);
 
-		rotation += Δtime;
-
 		requestAnimationFrame(render);
 	};