modelMindARPath2.html

<html>

<head>
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title>MindAR MODELS</title>

	<!-- <script src='https://finalar.github.io/js/GLTFLoader.js'></script> -->

	<link rel=stylesheet href="css/progress.css" />
	<link rel=stylesheet href="css/navBar.css" />
	<link rel=stylesheet href="css/popup.css" />
	<script async src="https://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r132/three.module.js"></script> -->
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r126/examples/js/loaders/GLTFLoader.js"></script> -->
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script> -->

	<script type="importmap">
    {
      "imports": 
	  {
		"three/addons/": "https://unpkg.com/three@0.153.0/examples/jsm/",
		"mindar-image-three":"https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-three.prod.js",
		"three": "https://finalar.github.io/build/three.module.js",
        "gltfloader":"https://finalar.github.io/js/GLTFLoader.js"
		}
    }
    </script>
	<script type="module">

	let total;

		function initialize(targetInfoGiven) {

			const phase2Label = document.getElementById("phase 2 label");
			phase2Label.innerHTML = "0ms";

			while (scene.children.length > 0) {
				scene.remove(scene.children[0]);
			}

			///////////////////////////////////////////////////////////
			///////////////// Marker 0 -> targetInfo1 /////////////////
			///////////////////////////////////////////////////////////

			ambientLight = new THREE.AmbientLight(0xcccccc, 1.0);
			scene.add(ambientLight);

			const markerRoot = mindarThree.addAnchor(0);


			//const geometry = new THREE.PlaneGeometry(1, 0.55);
			// const geometry = new THREE.PlaneBufferGeometry(0.5, 0.5, 4, 4);
			// const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.5 });
			// const plane = new THREE.Mesh(geometry, material);
			// markerRoot.group.add(plane);

			let model = null;

			var modelLoaded = false; // Flag to track if the model has been loaded
			var loadingInProcess = false;
			var targetInfo = targetInfoGiven;
			markerRoot.onTargetFound = () => {


				console.log("markerFound...");
				progressTime(targetInfo.progressPhase, 0);


				document.getElementById("marker_label").innerHTML = 'Marker Found';

				var begin = Date.now();
				var end;
				let mesh0;

				if (!modelLoaded && !loadingInProcess) {
					loadingInProcess = true;
					console.time("Time this");
					let loader = new GLTFLoader();	

					contentLenghtFinder(targetInfo);

					total = targetInfo.size
					
					loader.load(targetInfo.modelPath + targetInfo.modelFile, function (gltf) {
						mesh0 = gltf.scene;
						mesh0.rotation.x = Math.PI / 2;
						mesh0.position.y = targetInfo.positionY;
						mesh0.scale.set(targetInfo.scaleSet, targetInfo.scaleSet, targetInfo.scaleSet);
						markerRoot.group.add(mesh0);

						console.timeEnd("Time this");
						end = Date.now();
						var timeSpent = (end - begin);
						progressTime(targetInfo.progressPhase, timeSpent);

						// Set the modelLoaded flag to true once the model is loaded
						modelLoaded = true;
						loadingInProcess = false;

					}, 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);

					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');
				}
			}

			markerRoot.onTargetLost = () => {
				console.log("Marker Lost...");

				document.getElementById("marker_label").innerHTML = 'Marker Lost';

				progress('phase 1', 0);

			}

			///////////////////////////////////////////////////////////

			//Content Length Fixer 
			function contentLenghtFinder(targetInfo) {
				var xhrBefore = new XMLHttpRequest();
				xhrBefore.open("HEAD", targetInfo.modelPath + targetInfo.modelFile, true);

				

				// Set a callback to handle the response
				xhrBefore.onreadystatechange = function () {
					if (xhrBefore.readyState == 4) {
						if (xhrBefore.status == 200) {
							// 'content-length' is available in the response headers
							var contentLength = xhrBefore.getResponseHeader("content-length");
							
							if (contentLength) {
								// Now that you have content length, you can proceed with loading
								// total = contentLength;
								console.log(contentLength);
							} else {
								console.log("Content-Length header not available.");
								// Handle the case where 'content-length' is not provided.
							}
						} else {
							console.log("Failed to retrieve the file information.");
							// Handle HTTP error, e.g., file not found, server error, etc.
						}
					}
				};

				// Send the HEAD request
				xhrBefore.send();
			}
		}

		const targetInfo1 = {
			meshColor: 0x0000ff,
			modelPath: 'https://finalar.github.io/models/SurveySet/',
			modelFile: 'Chess.glb',
			progressPhase: 'phase 2',
			positionY: 0,
			scaleSet: 0.1,
			size:9727240 
		};

		const targetInfo2 = {
			meshColor: 0x0000ff,
			modelPath: 'https://finalar.github.io/models/SurveySet/',
			modelFile: 'Chess4.glb',
			progressPhase: 'phase 2',
			positionY: 0,
			scaleSet: 0.05,
			size: 10812436
		};

		const targetInfo3 = {
			meshColor: 0x0000ff,
			modelPath: 'https://finalar.github.io/models/SurveySet/',
			modelFile: 'Chess2.glb',
			progressPhase: 'phase 2',
			positionY: 0,
			scaleSet: 0.5,
			size:29382632
		};

		document.addEventListener("DOMContentLoaded", function () {

			const button01 = document.getElementById("btn_1");
			const button02 = document.getElementById("btn_2");
			const button03 = document.getElementById("btn_3");


			button01.addEventListener("click", function () {
				initialize(targetInfo1);
			});

			button02.addEventListener("click", function () {
				initialize(targetInfo2);
			});

			button03.addEventListener("click", function () {
				initialize(targetInfo3);
			});

		});

		import * as THREE from 'three';
		import { MindARThree } from 'mindar-image-three';
		import { GLTFLoader } from "gltfloader";

		const mindarThree = new MindARThree({
			container: document.querySelector("#container"),
			imageTargetSrc: "https://finalar.github.io/imageTargets/Chess.mind"
		});

		const { renderer, scene, camera } = mindarThree;

		let ambientLight = new THREE.AmbientLight(0xcccccc, 1.0);
		scene.add(ambientLight);

		initialize(targetInfo1);

		const start = async () => {
			await mindarThree.start();
			renderer.setAnimationLoop(() => {
				renderer.render(scene, camera);
			});
		}


		const startButton = document.querySelector("#startButton");
		startButton.addEventListener("click", () => {
			start();
		});

		stopButton.addEventListener("click", () => {
			mindarThree.stop();
			mindarThree.renderer.setAnimationLoop(null);
		});

		//Prgress Loading Function
		function progress(phase, percentage) {
			var elem = document.getElementById(phase);
			var width = Math.floor(window.innerWidth * percentage)

			//var width = Math.floor(percentage * 100);
			//if (width <= 100) {
			elem.style.width = percentage + '%';
			document.getElementById(phase + " label").innerHTML = Math.floor(percentage) + '%';
			//}
			console.log("Progress width: " + width);
			console.log("Progress presentage: " + percentage);
		}

		function progressBug(phase) {
			var elem = document.getElementById(phase);

			elem.style.width = '100%';
			document.getElementById(phase + " label").innerHTML = 'loading ... unable to calculate %.';

		}

		//Time loading 
		function progressTime(phase, duration) {
			var elem = document.getElementById(phase);

			document.getElementById(phase + " label").innerHTML = " ";

			elem.style.width = '100%';
			document.getElementById(phase + " label").innerHTML = Math.floor(duration) + 'ms' + ' -->' + Math.floor(duration / 1000) + 's';
			console.log("Progress duration: " + duration);
		}



	</script>
</head>
<style>

</style>
<style>
	body {
		margin: 0;
	}

	#container {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	#control {
		display: flex;
		align-items: center;
		/* Center horizontally */
		justify-content: space-evenly;
	}

	.progress{
		visibility: hidden;
	}

	.btn6,
	.btn6:link,
	.btn6:visited {
		margin-top: 3px;
		padding: 5px 5px;
		border: 1px solid #333;
		color: #333;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 13px;
		letter-spacing: 3px;
		transition: all .2s ease-in-out;

		&:hover {
			background: #333;
			border: 1px solid #333;
			color: #fefefe;
			border-radius: 30px;
		}
	}
</style>
</head>

<body>

	<div id="container">
		<div id="control">
			<button id="startButton" class="btn6">Start</button>
			<button id="stopButton" class="btn6">Stop</button>
		</div>

		<div class="progress">
			<div class='bar' id="phase 1">
				<div class="label" id="phase 1 label">0%</div>
			</div>
		</div>
		<div class='progress2'>
			<div class="label2">
				<h3>Total Loading Duration</h3>
			</div>
		</div>
		<div class='progress3'>
			<div class='bar' id="phase 2">
				<div class="label" id="phase 2 label">0ms</div>
			</div>
		</div>

		<nav class="main-menu">
			<ul>
				<li>
					<a href="#">
						<!-- <box-icon name='signal-3'></box-icon> -->
						<!-- <i class="fa fa-home nav-icon"></i> -->
						<span class="nav-text" id="btn_1">M1 -9.5MB</span>
					</a>
				</li>

				<li>
					<a href="#">
						<!-- <box-icon name='signal-2' ></box-icon> -->
						<!-- <i class="fa fa-image nav-icon"></i> -->
						<span class="nav-text" id="btn_2">M2 -10.5MB</span>
					</a>
				</li>

				<li>
					<a href="#">
						<!-- <box-icon name='signal-1'></box-icon> -->
						<!-- <i class="fa fa-pen nav-icon"></i> -->
						<span class="nav-text" id="btn_3">M3 -28.7MB</span>
					</a>
				</li>
			</ul>
		</nav>

		<footer>
			<div id="marker_label">Marker Not Found</div>
		</footer>
	</div>



</body>

</html>