stemkoski · niebert · Sep 23, 2022 · Sep 23, 2022 · Sep 23, 2022 · Sep 23, 2022
diff --git a/Marker_Printout_AR_demo.pdf b/Marker_Printout_AR_demo.pdf
diff --git a/README.md b/README.md
@@ -1 +1,30 @@
 # AR-Examples
+The examples from [Lee Stemkoski](https://github.com/stemkoski/AR-Examples) was forked and a few examples are added.
+* for using these examples, print out the [markers](markers/Marker_Printout_AR_demo.pdf) and
+* switch on the WebCam and let browser to access the WebCam.
+* place the marker mentioned in the [demo page](https://niebert.github.io/AR-Examples) in front of the camera and move the markers
+* in some AR examples multiple markers can be used and different objects can be places
+* also [360-degree (equirectangular) images](https://www.github.com/niebert/HuginSample) are used to and you could use e.g. the [hiro-marker](markers/Marker_Printout_AR_demo.pdf) to look around
+
+Check out the online demos with:
+## [Online-Demo](https://niebert.github.io/AR-Examples)
+* [Download ZIP-file](https://github.com/niebert/AR-Examples/archive/refs/heads/master.zip) of this repository
+* see also [Wikiversity learning resource about 3D-modelling](https://en.wikiversity.org/wiki/3D_Modelling/Examples/AR_with_Markers)
+* [HuginSample - Equirectangular Images](https://www.github.com/niebert/HuginSample) or [AFrame Navigation](https://niebert.github.io/aframe360navigation/)
+
+## 3D-Models on Marker
+Sketchfab publishes 3D-Models as creative commons. One the CC-BY-4.0 models a dinosaur (Spinosaurus) is used as a 3D model on a marker. The model is called 
+* "[primal carnage spinosaurus](https://skfb.ly/pswyN))" (URL: https://skfb.ly/pswyN) created by `seth the yutyrannus`.
+* The 3D model is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
+* ***AR-Web-Demo:*** [Spinosaurus on AR-Marker](https://niebert.github.io/AR-Examples/spinosaurus_hiro_ar.html) - ***VR-Web-Demo:*** [Spinosaurus in VR](https://niebert.github.io/HuginSample/spinosaurus_rieselfelder_aframe.html)
+* GLB-File: [model3d/primal_carnage_spinosaurus_small.glb](model3d/primal_carnage_spinosaurus_small.glb)
+![Spinosaurus on AR-Marker](./img/spinosaurus_on_ar_marker.png)
+
+* **(Print Marker)** Use Hiro-Marker as print out
+* **(Display 3D Model in Browser)** Start [Web-Demo - Spinosaurus on AR-Marker - "Hiro"](https://niebert.github.io/AR-Examples/spinosaurus_hiro_ar.html)
+* **(Marker in Camera Viewport)** Allow camera to record Hiro-Marker in Webcam.
+* **(3D Model in Webpage displayed on Marker)** Dinosaur will be placed on Hiro-Marker in camera image.
+* **(Coordinate System)** Hiro marker (and any other marker) defines in the asymmetric shape a coordinate system in which the objects are placed.
+* **(Scaling of Object - Marker Size)** The size of the Hiro marker defines the unit length in the coordinate system. E.g. triple size of printed Hiro marker scales the objects by the factor 3.
+
+![Hiro-Marker](./markers/hiro.png)
diff --git a/a_hiro.html b/a_hiro.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Receiver of Params</title>
+    <script src="js/linkparam.js"></script>
+  </head>
+  <body style="background-color: #CACACA">
+	<h3>Verwenden Sie den folgenden Marker</h3>
+  	<div id="markerimage">
+  	</div>
+
+  	<div id="paramout">
+  	</div>
+    <textarea id="nexturl" row="5" cols="95" style="display:none">undefined nexturl</textarea>
+    <textarea id="marker" row="5" cols="95"  style="display:none">undefined marker</textarea>
+    <script>
+		var vNextURL = "";
+  		var vMarker = "";
+  		var vLinkParam = new LinkParam();
+  		vLinkParam.init(document);
+  		document.getElementById("paramout").innerHTML = vLinkParam.getTableHTML();
+  		if (vLinkParam.exists("nexturl")) {
+  			vNextURL= vLinkParam.getValue("nexturl");
+  			//alert(vPar);
+  			document.getElementById("nexturl").value = vNextURL;
+			  // setTimeout("window.location.href='"+vNextURL+"'",5000);
+
+  		} else {
+  			alert("Receiver needs a LinkParameter 'nexturl'")
+  		}
+  		if (vLinkParam.exists("marker")) {
+  			var vMarker = vLinkParam.getValue("marker");
+  			//alert(vPar);
+  			document.getElementById("marker").value = vMarker;
+  			var img = document.createElement("img");
+			//img.src = "markers/hiro.png";
+			img.src = "markers/"+vMarker+".png";
+			var src = document.getElementById("markerimage");
+			src.appendChild(img);
+  		} else {
+  			alert("Receiver needs a LinkParameter 'marker'")
+  		}
+  	</script>
+  </body>
+</html>
diff --git a/a_marker.html b/a_marker.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Receiver of Params</title>
+    <script src="js/linkparam.js"></script>
+  </head>
+  <body style="background-color: #CACACA">
+	<h3>Use the following Marker for the AR-Example</h3>
+  	<div id="markerimage">
+  	</div>
+
+  	<div id="paramout">
+  	</div>
+    <textarea id="nexturl" row="5" cols="95" style="display:none">undefined nexturl</textarea>
+    <textarea id="marker" row="5" cols="95"  style="display:none">undefined marker</textarea>
+    <script>
+		var vNextURL = "";
+  		var vMarker = "";
+  		var vLinkParam = new LinkParam();
+  		vLinkParam.init(document);
+  		document.getElementById("paramout").innerHTML = vLinkParam.getTableHTML();
+  		if (vLinkParam.exists("nexturl")) {
+  			vNextURL= vLinkParam.getValue("nexturl");
+  			//alert(vPar);
+  			document.getElementById("nexturl").value = vNextURL;
+			setTimeout("window.location.href='"+vNextURL+"'",5000)
+
+  		} else {
+  			alert("Receiver needs a LinkParameter 'nexturl'")
+  		}
+  		if (vLinkParam.exists("marker")) {
+  			var vMarker = vLinkParam.getValue("marker");
+  			//alert(vPar);
+  			document.getElementById("marker").value = vMarker;
+  			var img = document.createElement("img");
+			img.width=450;
+			//img.src = "markers/hiro.png";
+			img.src = "markers/"+vMarker+".png";
+			var src = document.getElementById("markerimage");
+			src.appendChild(img);
+  		} else {
+  			alert("Receiver needs a LinkParameter 'marker'")
+  		}
+  	</script>
+  </body>
+</html>
diff --git a/basic-scene-hiro.html b/basic-scene-hiro.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<title>Hello, AR Cubes!</title>
+	<!-- include three.js library -->
+	<script src='js/three.js'></script>
+	<!-- include jsartookit -->
+	<script src="jsartoolkit5/artoolkit.min.js"></script>
+	<script src="jsartoolkit5/artoolkit.api.js"></script>
+	<!-- include threex.artoolkit -->
+	<script src="threex/threex-artoolkitsource.js"></script>
+	<script src="threex/threex-artoolkitcontext.js"></script>
+	<script src="threex/threex-arbasecontrols.js"></script>
+	<script src="threex/threex-armarkercontrols.js"></script>
+</head>
+
+<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
+
+<!-- 
+  Example created by Lee Stemkoski: https://github.com/stemkoski
+  Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
+-->
+
+<script>
+
+var scene, camera, renderer, clock, deltaTime, totalTime;
+
+var arToolkitSource, arToolkitContext;
+
+var markerRoot1, markerRoot2;
+
+var mesh1;
+
+initialize();
+animate();
+
+function initialize()
+{
+	scene = new THREE.Scene();
+
+	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
+	scene.add( ambientLight );
+
+	camera = new THREE.Camera();
+	scene.add(camera);
+
+	renderer = new THREE.WebGLRenderer({
+		antialias : true,
+		alpha: true
+	});
+	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
+	renderer.setSize( 640, 480 );
+	renderer.domElement.style.position = 'absolute'
+	renderer.domElement.style.top = '0px'
+	renderer.domElement.style.left = '0px'
+	document.body.appendChild( renderer.domElement );
+
+	clock = new THREE.Clock();
+	deltaTime = 0;
+	totalTime = 0;
+
+	////////////////////////////////////////////////////////////
+	// setup arToolkitSource
+	////////////////////////////////////////////////////////////
+
+	arToolkitSource = new THREEx.ArToolkitSource({
+		sourceType : 'webcam',
+	});
+
+	function onResize()
+	{
+		arToolkitSource.onResize()	
+		arToolkitSource.copySizeTo(renderer.domElement)	
+		if ( arToolkitContext.arController !== null )
+		{
+			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)	
+		}	
+	}
+
+	arToolkitSource.init(function onReady(){
+		onResize()
+	});
+
+	// handle resize event
+	window.addEventListener('resize', function(){
+		onResize()
+	});
+
+	////////////////////////////////////////////////////////////
+	// setup arToolkitContext
+	////////////////////////////////////////////////////////////	
+
+	// create atToolkitContext
+	arToolkitContext = new THREEx.ArToolkitContext({
+		cameraParametersUrl: 'data/camera_para.dat',
+		detectionMode: 'mono'
+	});
+
+	// copy projection matrix to camera when initialization complete
+	arToolkitContext.init( function onCompleted(){
+		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
+	});
+
+	////////////////////////////////////////////////////////////
+	// setup markerRoots
+	////////////////////////////////////////////////////////////
+
+	let loader = new THREE.TextureLoader();
+	let texture = loader.load( 'images/border.png' );
+
+	let patternArray = ["letterA", "letterB", "letterC", "letterD", "letterF", "kanji", "hiro"];
+	let colorArray   = [0xff0000, 0xff8800, 0xffff00, 0x00cc00, 0x0000ff, 0xcc00ff, 0xcccccc];
+	for (let i = 0; i < 7; i++)
+	{
+		let markerRoot = new THREE.Group();
+		scene.add(markerRoot);
+		let markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
+			type : 'pattern', patternUrl : "data/" + patternArray[i] + ".patt",
+		});
+
+		let mesh = new THREE.Mesh( 
+			new THREE.CubeGeometry(1.25,1.25,1.25), 
+			new THREE.MeshBasicMaterial({color:colorArray[i], map:texture, transparent:true, opacity:0.5}) 
+		);
+		mesh.position.y = 1.25/2;
+		markerRoot.add( mesh );
+	}
+}
+
+
+function update()
+{
+	// update artoolkit on every frame
+	if ( arToolkitSource.ready !== false )
+		arToolkitContext.update( arToolkitSource.domElement );
+}
+
+
+function render()
+{
+	renderer.render( scene, camera );
+}
+
+
+function animate()
+{
+	requestAnimationFrame(animate);
+	deltaTime = clock.getDelta();
+	totalTime += deltaTime;
+	update();
+	render();
+}
+
+</script>
+
+</body>
+</html>