From 9770e5d9ccb47723d7538f6e968ca216a84c5db5 Mon Sep 17 00:00:00 2001
From: Gagana Samarasekara <gaganasamarasekara8@gmail.com>
Date: Tue, 16 Jan 2024 10:24:47 +0530
Subject: [PATCH] added the keyboard.js to path1

---
 modelMindARPath1.html | 783 +++++++++++++++++++++++-------------------
 1 file changed, 422 insertions(+), 361 deletions(-)

diff --git a/modelMindARPath1.html b/modelMindARPath1.html
index d3bc542..eb58d30 100755
--- a/modelMindARPath1.html
+++ b/modelMindARPath1.html
@@ -28,6 +28,11 @@
 		}
     }
     </script>
+
+	<script src='js/keyboard.js'></script>
+	<!-- include three.js library -->
+	<script src='js/three.js'></script>
+
 	<script type="module">
 
 		let total;
@@ -42,57 +47,57 @@
 			size: 11173332
 		};
 
-		const targetInfo2 = {
-			meshColor: 0x0000ff,
-			modelPath: 'https://finalar.github.io/models/SurveySet/',
-			modelFile: 'Ironman.glb',
-			progressPhase: 'phase 2',
-			positionY: 0,
-			scaleSet: 0.1,
-			size: 18233056
-		};
-
-		const targetInfo3 = {
-			meshColor: 0x0000ff,
-			modelPath: 'https://finalar.github.io/models/SurveySet/',
-			modelFile: 'DodgeChallnger.glb',
-			progressPhase: 'phase 2',
-			positionY: 0,
-			scaleSet: 0.2,
-			size: 24981632
-		};
-
-
-		const targetInfo4 = {
-			meshColor: 0x0000ff,
-			modelPath: 'https://finalar.github.io/models/SurveySet/',
-			modelFile: 'Prime.glb',
-			progressPhase: 'phase 2',
-			positionY: 0,
-			scaleSet: 0.05,
-			size: 44004212
-		};
-
-		const targetInfo5 = {
-			meshColor: 0x0000ff,
-			modelPath: 'https://finalar.github.io/models/SurveySet/',
-			modelFile: 'Mercedes.glb',
-			progressPhase: 'phase 2',
-			positionY: 1,
-			scaleSet: 0.45,
-			size: 53559160
-		};
-
-
-		const targetInfo6 = {
-			meshColor: 0x0000ff,
-			modelPath: 'https://finalar.github.io/models/SurveySet/',
-			modelFile: 'Helicopter.glb',
-			progressPhase: 'phase 2',
-			positionY: 0,
-			scaleSet: 1,
-			size: 79347688
-		};
+		// const targetInfo2 = {
+		// 	meshColor: 0x0000ff,
+		// 	modelPath: 'https://finalar.github.io/models/SurveySet/',
+		// 	modelFile: 'Ironman.glb',
+		// 	progressPhase: 'phase 2',
+		// 	positionY: 0,
+		// 	scaleSet: 0.1,
+		// 	size: 18233056
+		// };
+
+		// const targetInfo3 = {
+		// 	meshColor: 0x0000ff,
+		// 	modelPath: 'https://finalar.github.io/models/SurveySet/',
+		// 	modelFile: 'DodgeChallnger.glb',
+		// 	progressPhase: 'phase 2',
+		// 	positionY: 0,
+		// 	scaleSet: 0.2,
+		// 	size: 24981632
+		// };
+
+
+		// const targetInfo4 = {
+		// 	meshColor: 0x0000ff,
+		// 	modelPath: 'https://finalar.github.io/models/SurveySet/',
+		// 	modelFile: 'Prime.glb',
+		// 	progressPhase: 'phase 2',
+		// 	positionY: 0,
+		// 	scaleSet: 0.05,
+		// 	size: 44004212
+		// };
+
+		// const targetInfo5 = {
+		// 	meshColor: 0x0000ff,
+		// 	modelPath: 'https://finalar.github.io/models/SurveySet/',
+		// 	modelFile: 'Mercedes.glb',
+		// 	progressPhase: 'phase 2',
+		// 	positionY: 1,
+		// 	scaleSet: 0.45,
+		// 	size: 53559160
+		// };
+
+
+		// const targetInfo6 = {
+		// 	meshColor: 0x0000ff,
+		// 	modelPath: 'https://finalar.github.io/models/SurveySet/',
+		// 	modelFile: 'Helicopter.glb',
+		// 	progressPhase: 'phase 2',
+		// 	positionY: 0,
+		// 	scaleSet: 1,
+		// 	size: 79347688
+		// };
 
 		import * as THREE from 'three';
 		import { MindARThree } from 'mindar-image-three';
@@ -104,6 +109,12 @@
 		});
 
 		const { renderer, scene, camera } = mindarThree;
+		var mover, keyboard, deltaTime;
+
+		mover = new THREE.Group();
+		mover.add( camera );
+		mover.position.set(0, 2, 4);
+		scene.add( mover );
 
 		let ambientLight = new THREE.AmbientLight(0xcccccc, 1.0);
 		scene.add(ambientLight);
@@ -144,6 +155,7 @@
 			if (!modelLoaded && !loadingInProcess) {
 				loadingInProcess = true;
 				console.time("Time this");
+				// console.log("check 1");
 				let loader = new GLTFLoader();
 
 				total = targetInfo1.size
@@ -175,11 +187,13 @@
 			// }
 
 			function onProgress(xhr) {
+				console.log("check 1");
 				console.log(xhr);
 
 				if (xhr.total > 0) {
 					var percentage = (xhr.loaded / total * 100);
 					console.log(percentage + '% loaded');
+					console.log("check 1");
 					progress('phase 1', percentage);
 				} else {
 					var percentage = (xhr.loaded / total * 100);
@@ -198,6 +212,7 @@
 
 		markerRoot.onTargetLost = () => {
 			console.log("Marker Lost...");
+			console.log("check 2");
 
 			document.getElementById("marker_label").innerHTML = 'Marker Lost';
 
@@ -215,184 +230,184 @@
 		///////////////// Marker 1 -> targetInfo2 /////////////////
 		///////////////////////////////////////////////////////////
 
-		const markerRoot1 = mindarThree.addAnchor(3);
+		// const markerRoot1 = mindarThree.addAnchor(3);
 
 		// markerRoot1.group.add(plane);
 
-		let model1 = null;
+		// let model1 = null;
 
-		var modelLoaded1 = false; // Flag to track if the model has been loaded
-		var loadingInProcess1 = false;
+		// var modelLoaded1 = false; // Flag to track if the model has been loaded
+		// var loadingInProcess1 = false;
 
-		markerRoot1.onTargetFound = () => {
-			console.log("markerFound...");
-			progressTime(targetInfo2.progressPhase, 0);
+		// markerRoot1.onTargetFound = () => {
+		// 	console.log("markerFound...");
+		// 	progressTime(targetInfo2.progressPhase, 0);
 
 
-			document.getElementById("marker_label").innerHTML = 'Marker Found';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Found';
 
-			var begin = Date.now();
-			var end;
-			let mesh0;
+		// 	var begin = Date.now();
+		// 	var end;
+		// 	let mesh0;
 
-			if (!modelLoaded1 && !loadingInProcess1) {
-				loadingInProcess1 = true;
-				console.time("Time this");
-				let loader = new GLTFLoader();
+		// 	if (!modelLoaded1 && !loadingInProcess1) {
+		// 		loadingInProcess1 = true;
+		// 		console.time("Time this");
+		// 		let loader = new GLTFLoader();
 
-				total = targetInfo2.size
+		// 		total = targetInfo2.size
 
-				loader.load(targetInfo2.modelPath + targetInfo2.modelFile, function (gltf) {
-					mesh0 = gltf.scene;
-					mesh0.rotation.x = Math.PI / 2;
-					mesh0.position.y = targetInfo2.positionY;
-					mesh0.scale.set(targetInfo2.scaleSet, targetInfo2.scaleSet, targetInfo2.scaleSet);
-					markerRoot1.group.add(mesh0);
+		// 		loader.load(targetInfo2.modelPath + targetInfo2.modelFile, function (gltf) {
+		// 			mesh0 = gltf.scene;
+		// 			mesh0.rotation.x = Math.PI / 2;
+		// 			mesh0.position.y = targetInfo2.positionY;
+		// 			mesh0.scale.set(targetInfo2.scaleSet, targetInfo2.scaleSet, targetInfo2.scaleSet);
+		// 			markerRoot1.group.add(mesh0);
 
-					console.timeEnd("Time this");
-					end = Date.now();
-					var timeSpent = (end - begin);
-					progressTime(targetInfo2.progressPhase, timeSpent);
+		// 			console.timeEnd("Time this");
+		// 			end = Date.now();
+		// 			var timeSpent = (end - begin);
+		// 			progressTime(targetInfo2.progressPhase, timeSpent);
 
-					// Set the modelLoaded flag to true once the model is loaded
-					modelLoaded1 = true;
-					loadingInProcess1 = false;
+		// 			// Set the modelLoaded flag to true once the model is loaded
+		// 			modelLoaded1 = true;
+		// 			loadingInProcess1 = false;
 
-				}, onProgress, onError);
-			}
+		// 		}, onProgress, onError);
+		// 	}
 
 
-			// function onProgress(xhr) {
-			// 	console.log(xhr);
-			// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-			// 	progress('phase 1', xhr.loaded / xhr.total * 100);
-			// }
+		// 	// function onProgress(xhr) {
+		// 	// 	console.log(xhr);
+		// 	// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+		// 	// 	progress('phase 1', xhr.loaded / xhr.total * 100);
+		// 	// }
 
-			function onProgress(xhr) {
-				console.log(xhr);
+		// 	function onProgress(xhr) {
+		// 		console.log(xhr);
 
-				if (xhr.total > 0) {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-				} else {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-					// console.log('Total size is 0; unable to calculate percentage.');
-					// progressBug('phase 1');
-				}
-			}
+		// 		if (xhr.total > 0) {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 		} else {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 			// console.log('Total size is 0; unable to calculate percentage.');
+		// 			// progressBug('phase 1');
+		// 		}
+		// 	}
 
-			function onError(xhr) {
-				console.log('An error happened');
-				progress('phase 1', 'An error happened');
-			}
-		}
+		// 	function onError(xhr) {
+		// 		console.log('An error happened');
+		// 		progress('phase 1', 'An error happened');
+		// 	}
+		// }
 
-		markerRoot1.onTargetLost = () => {
-			console.log("Marker Lost...");
+		// markerRoot1.onTargetLost = () => {
+		// 	console.log("Marker Lost...");
 
-			document.getElementById("marker_label").innerHTML = 'Marker Lost';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Lost';
 
-			progress('phase 1', 0);
+		// 	progress('phase 1', 0);
 
-			const phase2Label = document.getElementById("phase 2 label");
-			phase2Label.textContent += ": Previous log";
+		// 	const phase2Label = document.getElementById("phase 2 label");
+		// 	phase2Label.textContent += ": Previous log";
 
-		}
+		// }
 
 		///////////////////////////////////////////////////////////
 		///////////////////////////////////////////////////////////
 		///////////////// Marker 2 -> targetInfo3 /////////////////
 		///////////////////////////////////////////////////////////
 
-		const markerRoot2 = mindarThree.addAnchor(1);
+		// const markerRoot2 = mindarThree.addAnchor(1);
 
 		// markerRoot2.group.add(plane);
 
-		let model2 = null;
+		// let model2 = null;
 
-		var modelLoaded2 = false; // Flag to track if the model has been loaded
-		var loadingInProcess2 = false;
+		// var modelLoaded2 = false; // Flag to track if the model has been loaded
+		// var loadingInProcess2 = false;
 
-		markerRoot2.onTargetFound = () => {
-			console.log("markerFound...");
-			progressTime(targetInfo3.progressPhase, 0);
+		// markerRoot2.onTargetFound = () => {
+		// 	console.log("markerFound...");
+		// 	progressTime(targetInfo3.progressPhase, 0);
 
 
-			document.getElementById("marker_label").innerHTML = 'Marker Found';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Found';
 
-			var begin = Date.now();
-			var end;
-			let mesh0;
+		// 	var begin = Date.now();
+		// 	var end;
+		// 	let mesh0;
 
-			if (!modelLoaded2 && !loadingInProcess2) {
-				loadingInProcess2 = true;
-				console.time("Time this");
-				let loader = new GLTFLoader();
+		// 	if (!modelLoaded2 && !loadingInProcess2) {
+		// 		loadingInProcess2 = true;
+		// 		console.time("Time this");
+		// 		let loader = new GLTFLoader();
 
-				total = targetInfo3.size
+		// 		total = targetInfo3.size
 
-				loader.load(targetInfo3.modelPath + targetInfo3.modelFile, function (gltf) {
-					mesh0 = gltf.scene;
-					mesh0.rotation.x = Math.PI / 2;
-					mesh0.position.y = targetInfo2.positionY;
-					mesh0.scale.set(targetInfo3.scaleSet, targetInfo3.scaleSet, targetInfo3.scaleSet);
-					markerRoot2.group.add(mesh0);
+		// 		loader.load(targetInfo3.modelPath + targetInfo3.modelFile, function (gltf) {
+		// 			mesh0 = gltf.scene;
+		// 			mesh0.rotation.x = Math.PI / 2;
+		// 			mesh0.position.y = targetInfo2.positionY;
+		// 			mesh0.scale.set(targetInfo3.scaleSet, targetInfo3.scaleSet, targetInfo3.scaleSet);
+		// 			markerRoot2.group.add(mesh0);
 
-					console.timeEnd("Time this");
-					end = Date.now();
-					var timeSpent = (end - begin);
-					progressTime(targetInfo3.progressPhase, timeSpent);
+		// 			console.timeEnd("Time this");
+		// 			end = Date.now();
+		// 			var timeSpent = (end - begin);
+		// 			progressTime(targetInfo3.progressPhase, timeSpent);
 
-					// Set the modelLoaded flag to true once the model is loaded
-					modelLoaded2 = true;
-					loadingInProcess2 = false;
+		// 			// Set the modelLoaded flag to true once the model is loaded
+		// 			modelLoaded2 = true;
+		// 			loadingInProcess2 = false;
 
-				}, onProgress, onError);
-			}
+		// 		}, onProgress, onError);
+		// 	}
 
 
-			// function onProgress(xhr) {
-			// 	console.log(xhr);
-			// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-			// 	progress('phase 1', xhr.loaded / xhr.total * 100);
-			// }
+		// 	// function onProgress(xhr) {
+		// 	// 	console.log(xhr);
+		// 	// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+		// 	// 	progress('phase 1', xhr.loaded / xhr.total * 100);
+		// 	// }
 
-			function onProgress(xhr) {
-				console.log(xhr);
+		// 	function onProgress(xhr) {
+		// 		console.log(xhr);
 
-				if (xhr.total > 0) {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-				} else {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-					// console.log('Total size is 0; unable to calculate percentage.');
-					// progressBug('phase 1');
-				}
-			}
+		// 		if (xhr.total > 0) {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 		} else {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 			// console.log('Total size is 0; unable to calculate percentage.');
+		// 			// progressBug('phase 1');
+		// 		}
+		// 	}
 
-			function onError(xhr) {
-				console.log('An error happened');
-				progress('phase 1', 'An error happened');
-			}
-		}
+		// 	function onError(xhr) {
+		// 		console.log('An error happened');
+		// 		progress('phase 1', 'An error happened');
+		// 	}
+		// }
 
-		markerRoot2.onTargetLost = () => {
-			console.log("Marker Lost...");
+		// markerRoot2.onTargetLost = () => {
+		// 	console.log("Marker Lost...");
 
-			document.getElementById("marker_label").innerHTML = 'Marker Lost';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Lost';
 
-			progress('phase 1', 0);
+		// 	progress('phase 1', 0);
 
-			const phase2Label = document.getElementById("phase 2 label");
-			phase2Label.textContent += ": Previous log";
+		// 	const phase2Label = document.getElementById("phase 2 label");
+		// 	phase2Label.textContent += ": Previous log";
 
-		}
+		// }
 
 		///////////////////////////////////////////////////////////
 
@@ -400,92 +415,92 @@
 		///////////////// Marker 3 -> targetInfo4 /////////////////
 		///////////////////////////////////////////////////////////
 
-		const markerRoot3 = mindarThree.addAnchor(7);
+		// const markerRoot3 = mindarThree.addAnchor(7);
 
 		// markerRoot3.group.add(plane);
 
-		let model3 = null;
+		// let model3 = null;
 
-		var modelLoaded3 = false; // Flag to track if the model has been loaded
-		var loadingInProcess3 = false;
+		// var modelLoaded3 = false; // Flag to track if the model has been loaded
+		// var loadingInProcess3 = false;
 
-		markerRoot3.onTargetFound = () => {
-			console.log("markerFound...");
-			progressTime(targetInfo4.progressPhase, 0);
+		// markerRoot3.onTargetFound = () => {
+		// 	console.log("markerFound...");
+		// 	progressTime(targetInfo4.progressPhase, 0);
 
 
-			document.getElementById("marker_label").innerHTML = 'Marker Found';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Found';
 
-			var begin = Date.now();
-			var end;
-			let mesh0;
+		// 	var begin = Date.now();
+		// 	var end;
+		// 	let mesh0;
 
-			if (!modelLoaded3 && !loadingInProcess3) {
-				loadingInProcess3 = true;
-				console.time("Time this");
-				let loader = new GLTFLoader();
+		// 	if (!modelLoaded3 && !loadingInProcess3) {
+		// 		loadingInProcess3 = true;
+		// 		console.time("Time this");
+		// 		let loader = new GLTFLoader();
 
-				total = targetInfo4.size
+		// 		total = targetInfo4.size
 
-				loader.load(targetInfo4.modelPath + targetInfo4.modelFile, function (gltf) {
-					mesh0 = gltf.scene;
-					mesh0.rotation.x = Math.PI / 2;
-					mesh0.position.y = targetInfo4.positionY;
-					mesh0.scale.set(targetInfo4.scaleSet, targetInfo4.scaleSet, targetInfo4.scaleSet);
-					markerRoot3.group.add(mesh0);
+		// 		loader.load(targetInfo4.modelPath + targetInfo4.modelFile, function (gltf) {
+		// 			mesh0 = gltf.scene;
+		// 			mesh0.rotation.x = Math.PI / 2;
+		// 			mesh0.position.y = targetInfo4.positionY;
+		// 			mesh0.scale.set(targetInfo4.scaleSet, targetInfo4.scaleSet, targetInfo4.scaleSet);
+		// 			markerRoot3.group.add(mesh0);
 
-					console.timeEnd("Time this");
-					end = Date.now();
-					var timeSpent = (end - begin);
-					progressTime(targetInfo4.progressPhase, timeSpent);
+		// 			console.timeEnd("Time this");
+		// 			end = Date.now();
+		// 			var timeSpent = (end - begin);
+		// 			progressTime(targetInfo4.progressPhase, timeSpent);
 
-					// Set the modelLoaded flag to true once the model is loaded
-					modelLoaded3 = true;
-					loadingInProcess3 = false;
+		// 			// Set the modelLoaded flag to true once the model is loaded
+		// 			modelLoaded3 = true;
+		// 			loadingInProcess3 = false;
 
-				}, onProgress, onError);
-			}
+		// 		}, onProgress, onError);
+		// 	}
 
 
-			// function onProgress(xhr) {
-			// 	console.log(xhr);
-			// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-			// 	progress('phase 1', xhr.loaded / xhr.total * 100);
-			// }
+		// 	// function onProgress(xhr) {
+		// 	// 	console.log(xhr);
+		// 	// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+		// 	// 	progress('phase 1', xhr.loaded / xhr.total * 100);
+		// 	// }
 
-			function onProgress(xhr) {
-				console.log(xhr);
+		// 	function onProgress(xhr) {
+		// 		console.log(xhr);
 
-				if (xhr.total > 0) {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-				} else {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-					// console.log('Total size is 0; unable to calculate percentage.');
-					// progressBug('phase 1');
-				}
-			}
+		// 		if (xhr.total > 0) {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 		} else {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 			// console.log('Total size is 0; unable to calculate percentage.');
+		// 			// progressBug('phase 1');
+		// 		}
+		// 	}
 
-			function onError(xhr) {
-				console.log('An error happened');
-				progress('phase 1', 'An error happened');
-			}
-		}
+		// 	function onError(xhr) {
+		// 		console.log('An error happened');
+		// 		progress('phase 1', 'An error happened');
+		// 	}
+		// }
 
-		markerRoot3.onTargetLost = () => {
-			console.log("Marker Lost...");
+		// markerRoot3.onTargetLost = () => {
+		// 	console.log("Marker Lost...");
 
-			document.getElementById("marker_label").innerHTML = 'Marker Lost';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Lost';
 
-			progress('phase 1', 0);
+		// 	progress('phase 1', 0);
 
-			const phase2Label = document.getElementById("phase 2 label");
-			phase2Label.textContent += ": Previous log";
+		// 	const phase2Label = document.getElementById("phase 2 label");
+		// 	phase2Label.textContent += ": Previous log";
 
-		}
+		// }
 
 		///////////////////////////////////////////////////////////
 
@@ -494,92 +509,92 @@
 		///////////////// Marker 4 -> targetInfo5 /////////////////
 		///////////////////////////////////////////////////////////
 
-		const markerRoot4 = mindarThree.addAnchor(5);
+		// const markerRoot4 = mindarThree.addAnchor(5);
 
 		// markerRoot4.group.add(plane);
 
-		let model4 = null;
+		// let model4 = null;
 
-		var modelLoaded4 = false; // Flag to track if the model has been loaded
-		var loadingInProcess4 = false;
+		// var modelLoaded4 = false; // Flag to track if the model has been loaded
+		// var loadingInProcess4 = false;
 
-		markerRoot4.onTargetFound = () => {
-			console.log("markerFound...");
-			progressTime(targetInfo5.progressPhase, 0);
+		// markerRoot4.onTargetFound = () => {
+		// 	console.log("markerFound...");
+		// 	progressTime(targetInfo5.progressPhase, 0);
 
 
-			document.getElementById("marker_label").innerHTML = 'Marker Found';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Found';
 
-			var begin = Date.now();
-			var end;
-			let mesh0;
+		// 	var begin = Date.now();
+		// 	var end;
+		// 	let mesh0;
 
-			if (!modelLoaded4 && !loadingInProcess4) {
-				loadingInProcess4 = true;
-				console.time("Time this");
-				let loader = new GLTFLoader();
+		// 	if (!modelLoaded4 && !loadingInProcess4) {
+		// 		loadingInProcess4 = true;
+		// 		console.time("Time this");
+		// 		let loader = new GLTFLoader();
 
-				total = targetInfo5.size
+		// 		total = targetInfo5.size
 
-				loader.load(targetInfo5.modelPath + targetInfo5.modelFile, function (gltf) {
-					mesh0 = gltf.scene;
-					mesh0.rotation.x = Math.PI / 2;
-					mesh0.position.y = targetInfo5.positionY;
-					mesh0.scale.set(targetInfo5.scaleSet, targetInfo5.scaleSet, targetInfo5.scaleSet);
-					markerRoot4.group.add(mesh0);
+		// 		loader.load(targetInfo5.modelPath + targetInfo5.modelFile, function (gltf) {
+		// 			mesh0 = gltf.scene;
+		// 			mesh0.rotation.x = Math.PI / 2;
+		// 			mesh0.position.y = targetInfo5.positionY;
+		// 			mesh0.scale.set(targetInfo5.scaleSet, targetInfo5.scaleSet, targetInfo5.scaleSet);
+		// 			markerRoot4.group.add(mesh0);
 
-					console.timeEnd("Time this");
-					end = Date.now();
-					var timeSpent = (end - begin);
-					progressTime(targetInfo5.progressPhase, timeSpent);
+		// 			console.timeEnd("Time this");
+		// 			end = Date.now();
+		// 			var timeSpent = (end - begin);
+		// 			progressTime(targetInfo5.progressPhase, timeSpent);
 
-					// Set the modelLoaded flag to true once the model is loaded
-					modelLoaded4 = true;
-					loadingInProcess4 = false;
+		// 			// Set the modelLoaded flag to true once the model is loaded
+		// 			modelLoaded4 = true;
+		// 			loadingInProcess4 = false;
 
-				}, onProgress, onError);
-			}
+		// 		}, onProgress, onError);
+		// 	}
 
 
-			// function onProgress(xhr) {
-			// 	console.log(xhr);
-			// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-			// 	progress('phase 1', xhr.loaded / xhr.total * 100);
-			// }
+		// 	// function onProgress(xhr) {
+		// 	// 	console.log(xhr);
+		// 	// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+		// 	// 	progress('phase 1', xhr.loaded / xhr.total * 100);
+		// 	// }
 
-			function onProgress(xhr) {
-				console.log(xhr);
+		// 	function onProgress(xhr) {
+		// 		console.log(xhr);
 
-				if (xhr.total > 0) {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-				} else {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-					// console.log('Total size is 0; unable to calculate percentage.');
-					// progressBug('phase 1');
-				}
-			}
+		// 		if (xhr.total > 0) {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 		} else {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 			// console.log('Total size is 0; unable to calculate percentage.');
+		// 			// progressBug('phase 1');
+		// 		}
+		// 	}
 
-			function onError(xhr) {
-				console.log('An error happened');
-				progress('phase 1', 'An error happened');
-			}
-		}
+		// 	function onError(xhr) {
+		// 		console.log('An error happened');
+		// 		progress('phase 1', 'An error happened');
+		// 	}
+		// }
 
-		markerRoot4.onTargetLost = () => {
-			console.log("Marker Lost...");
+		// markerRoot4.onTargetLost = () => {
+		// 	console.log("Marker Lost...");
 
-			document.getElementById("marker_label").innerHTML = 'Marker Lost';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Lost';
 
-			progress('phase 1', 0);
+		// 	progress('phase 1', 0);
 
-			const phase2Label = document.getElementById("phase 2 label");
-			phase2Label.textContent += ": Previous log";
+		// 	const phase2Label = document.getElementById("phase 2 label");
+		// 	phase2Label.textContent += ": Previous log";
 
-		}
+		// }
 
 		///////////////////////////////////////////////////////////
 
@@ -587,92 +602,92 @@
 		///////////////// Marker 5 -> targetInfo6 /////////////////
 		///////////////////////////////////////////////////////////
 
-		const markerRoot5 = mindarThree.addAnchor(8);
+		// const markerRoot5 = mindarThree.addAnchor(8);
 
 		// markerRoot5.group.add(plane);
 
-		let model5 = null;
+		// let model5 = null;
 
-		var modelLoaded5 = false; // Flag to track if the model has been loaded
-		var loadingInProcess5 = false;
+		// var modelLoaded5 = false; // Flag to track if the model has been loaded
+		// var loadingInProcess5 = false;
 
-		markerRoot5.onTargetFound = () => {
-			console.log("markerFound...");
-			progressTime(targetInfo6.progressPhase, 0);
+		// markerRoot5.onTargetFound = () => {
+		// 	console.log("markerFound...");
+		// 	progressTime(targetInfo6.progressPhase, 0);
 
 
-			document.getElementById("marker_label").innerHTML = 'Marker Found';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Found';
 
-			var begin = Date.now();
-			var end;
-			let mesh0;
+		// 	var begin = Date.now();
+		// 	var end;
+		// 	let mesh0;
 
-			if (!modelLoaded5 && !loadingInProcess4) {
-				loadingInProcess5 = true;
-				console.time("Time this");
-				let loader = new GLTFLoader();
+		// 	if (!modelLoaded5 && !loadingInProcess4) {
+		// 		loadingInProcess5 = true;
+		// 		console.time("Time this");
+		// 		let loader = new GLTFLoader();
 
-				total = targetInfo6.size
+		// 		total = targetInfo6.size
 
-				loader.load(targetInfo6.modelPath + targetInfo6.modelFile, function (gltf) {
-					mesh0 = gltf.scene;
-					mesh0.rotation.x = Math.PI / 2;
-					mesh0.position.y = targetInfo6.positionY;
-					mesh0.scale.set(targetInfo6.scaleSet, targetInfo6.scaleSet, targetInfo6.scaleSet);
-					markerRoot5.group.add(mesh0);
+		// 		loader.load(targetInfo6.modelPath + targetInfo6.modelFile, function (gltf) {
+		// 			mesh0 = gltf.scene;
+		// 			mesh0.rotation.x = Math.PI / 2;
+		// 			mesh0.position.y = targetInfo6.positionY;
+		// 			mesh0.scale.set(targetInfo6.scaleSet, targetInfo6.scaleSet, targetInfo6.scaleSet);
+		// 			markerRoot5.group.add(mesh0);
 
-					console.timeEnd("Time this");
-					end = Date.now();
-					var timeSpent = (end - begin);
-					progressTime(targetInfo6.progressPhase, timeSpent);
+		// 			console.timeEnd("Time this");
+		// 			end = Date.now();
+		// 			var timeSpent = (end - begin);
+		// 			progressTime(targetInfo6.progressPhase, timeSpent);
 
-					// Set the modelLoaded flag to true once the model is loaded
-					modelLoaded5 = true;
-					loadingInProcess5 = false;
+		// 			// Set the modelLoaded flag to true once the model is loaded
+		// 			modelLoaded5 = true;
+		// 			loadingInProcess5 = false;
 
-				}, onProgress, onError);
-			}
+		// 		}, onProgress, onError);
+		// 	}
 
 
-			// function onProgress(xhr) {
-			// 	console.log(xhr);
-			// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-			// 	progress('phase 1', xhr.loaded / xhr.total * 100);
-			// }
+		// 	// function onProgress(xhr) {
+		// 	// 	console.log(xhr);
+		// 	// 	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+		// 	// 	progress('phase 1', xhr.loaded / xhr.total * 100);
+		// 	// }
 
-			function onProgress(xhr) {
-				console.log(xhr);
+		// 	function onProgress(xhr) {
+		// 		console.log(xhr);
 
-				if (xhr.total > 0) {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-				} else {
-					var percentage = (xhr.loaded / total * 100);
-					console.log(percentage + '% loaded');
-					progress('phase 1', percentage);
-					// console.log('Total size is 0; unable to calculate percentage.');
-					// progressBug('phase 1');
-				}
-			}
+		// 		if (xhr.total > 0) {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 		} else {
+		// 			var percentage = (xhr.loaded / total * 100);
+		// 			console.log(percentage + '% loaded');
+		// 			progress('phase 1', percentage);
+		// 			// console.log('Total size is 0; unable to calculate percentage.');
+		// 			// progressBug('phase 1');
+		// 		}
+		// 	}
 
-			function onError(xhr) {
-				console.log('An error happened');
-				progress('phase 1', 'An error happened');
-			}
-		}
+		// 	function onError(xhr) {
+		// 		console.log('An error happened');
+		// 		progress('phase 1', 'An error happened');
+		// 	}
+		// }
 
-		markerRoot5.onTargetLost = () => {
-			console.log("Marker Lost...");
+		// markerRoot5.onTargetLost = () => {
+		// 	console.log("Marker Lost...");
 
-			document.getElementById("marker_label").innerHTML = 'Marker Lost';
+		// 	document.getElementById("marker_label").innerHTML = 'Marker Lost';
 
-			progress('phase 1', 0);
+		// 	progress('phase 1', 0);
 
-			const phase2Label = document.getElementById("phase 2 label");
-			phase2Label.textContent += ": Previous log";
+		// 	const phase2Label = document.getElementById("phase 2 label");
+		// 	phase2Label.textContent += ": Previous log";
 
-		}
+		// }
 
 		///////////////////////////////////////////////////////////
 
@@ -680,15 +695,61 @@
 			console.log("call start");
 			await mindarThree.start();
 			console.log("start done");
+			console.log(renderer);
 			renderer.setAnimationLoop(() => {
 				renderer.render(scene, camera);
 			});
+			// renderer.update();
 			console.log("setAnimationLoop done");
 		}
 
+		// update();
+
+		deltaTime =0;
+
+		function update()
+		{
+			keyboard.update();
+			console.log("HI");
+
+			let translateSpeed = 0.5; // units per second
+			let distance = translateSpeed * deltaTime;
+			let rotateSpeed = Math.PI/6; // radians per second
+			let angle = rotateSpeed * deltaTime;
+
+			if (keyboard.isKeyPressed("W"))
+				mover.translateZ( -distance );
+			if (keyboard.isKeyPressed("S"))
+				mover.translateZ( distance );
+
+			if (keyboard.isKeyPressed("A"))
+				mover.translateX( -distance );
+			if (keyboard.isKeyPressed("D"))
+				mover.translateX( distance );
+
+			if (keyboard.isKeyPressed("R"))
+				mover.translateY( distance );
+			if (keyboard.isKeyPressed("F"))
+				mover.translateY( -distance );
+
+			if (keyboard.isKeyPressed("Q"))
+				mover.rotateY( angle );
+			if (keyboard.isKeyPressed("E"))
+				mover.rotateY( -angle );
+
+			if (keyboard.isKeyPressed("T"))
+				mover.children[0].rotateX( angle );
+			if (keyboard.isKeyPressed("G"))
+				mover.children[0].rotateX( -angle );
+
+
+			//mesh.rotation.y += 0.01;
+		}
+
 
 		const startButton = document.querySelector("#startButton");
 		startButton.addEventListener("click", () => {
+			console.log("hello");
 			start();
 		});