modelMindARPath.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">

		const targetInfo1 = {
			// nftUrl: "https://followthedarkside.github.io/arjs-image-tracking-sample/resources/nft/" + nftName,
			meshColor: 0x0000ff,
			modelPath: 'https://finalar.github.io/models/SurveySet/',
			modelFile: 'Chess3.glb',
			progressPhase: 'phase 2',
			positionY: 1,
			scaleSet: 5
		};

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

		const markerRoot = mindarThree.addAnchor(0);
		//const geometry = new THREE.PlaneGeometry(1, 0.55);
		const geometry = new THREE.PlaneBufferGeometry(1, 1, 4, 4);
		const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, 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;

		markerRoot.onTargetFound = () => {
			console.log("markerFound...");

			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();

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

					console.timeEnd("Time this");
					end = Date.now();
					var timeSpent = (end - begin);
					progressTime(targetInfo1.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.loaded / xhr.total * 100) + '% loaded');
				progress('phase 1', xhr.loaded / xhr.total * 100);
			}

			function onError(xhr) {
				console.log('An error happened');
				progress('phase 1', 'An error happened');
			}
		}

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

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

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


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

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

		#control {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
		}
	</style>
</head>

<body>
	<div id="control">
		<button id="startButton">Start</button>
		<button id="stopButton">Stop</button>
	</div>

	<div id="container">
		<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" onclick="initialize(targetInfo1)">H</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" onclick="initialize(targetInfo2)">M</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" onclick="initialize(targetInfo3)">L</span>
					</a>
				</li>
			</ul>
		</nav>

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



</body>

</html>