rm8x · rm8x · Dec 3, 2017 · Dec 3, 2017 · Dec 3, 2017 · Dec 3, 2017
diff --git a/build/artoolkit.debug.js b/build/artoolkit.debug.js
diff --git a/build/artoolkit.min.js b/build/artoolkit.min.js
diff --git a/examples/DataNFT/pinball.fset b/examples/DataNFT/pinball.fset
diff --git a/examples/DataNFT/pinball.fset3 b/examples/DataNFT/pinball.fset3
diff --git a/examples/DataNFT/pinball.iset b/examples/DataNFT/pinball.iset
diff --git a/examples/js/third_party/three.js/three.js b/examples/js/third_party/three.js/three.js
diff --git a/examples/nft_babylonjs.html b/examples/nft_babylonjs.html
@@ -0,0 +1,95 @@
+<html>
+<head>
+<title>NFT marker example with Babylon.js</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+<style>
+html,body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	text-align: center;
+	overflow-x: hidden;
+}
+.portrait canvas {
+	transform-origin: 0 0;
+	transform: rotate(-90deg) translateX(-100%);
+}
+.desktop canvas {
+ 	transform: scale(-1, 1);
+}
+</style>
+</head>
+<body>
+<canvas id="renderCanvas" width="640" height="480"></canvas>
+<h1>NFT marker example with Bablyon.js</h1>
+<p>On Chrome on Android, tap the screen to start playing video stream.</p>
+<p>Show  <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/Marker%20images/pinball.jpg">Pinball image</a> to camera to display a colorful object on top of it. Tap the screen to rotate the object.
+
+<script async src="js/artoolkit.min.js"></script>
+<script src="js/third_party/babylon.js/babylon.2.5.max.js"></script>
+<script async src="js/artoolkit.babylon.js"></script>
+
+<script>
+window.canvas = document.getElementById('renderCanvas');
+window.ARBabylonOnLoad = function() {
+
+	ARController.getUserMediaBabylonScene({maxARVideoSize: 320, cameraParam: 'data/camera_para.dat', 
+	onSuccess: function(arScene, arController, arCamera) {
+
+		document.body.className = arController.orientation;
+
+		var engine = new BABYLON.Engine(window.canvas, true);
+        engine.setSize(window.canvas.width, window.canvas.height);
+
+		if (arController.orientation === 'portrait') {
+			var w = (window.innerWidth / arController.videoHeight) * arController.videoWidth;
+			var h = window.innerWidth;
+			engine.setSize(w, h);
+			engine.domElement.style.paddingBottom = (w-h) + 'px';
+		} else {
+			if (/Android|mobile|iPad|iPhone/i.test(navigator.userAgent)) {
+				engine.setSize(window.innerWidth, (window.innerWidth / arController.videoWidth) * arController.videoHeight);
+			} else {
+				engine.setSize(arController.videoWidth, arController.videoHeight);
+				document.body.className += ' desktop';
+			}
+		}
+
+		var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 0, 0), arScene.scene);
+
+		var box = BABYLON.Mesh.CreateBox('box1', 1, arScene.scene);
+		box.position.z = 40;
+		box.position.x = 80;
+		box.position.y = 80;
+		var scalingFactor = new BABYLON.Vector3(100, 100, 100);
+		box.scaling = scalingFactor;
+		box.isVisible = false;
+
+		arController.loadNFTMarker('dataNFT/pinball', function(markerId) {
+		    var markerRoot = arController.createBabylonNFTMarker(markerId, arScene.scene);
+			box.parent = markerRoot;
+		});
+
+		engine.runRenderLoop(function () {		
+			arScene.process();
+			arScene.scene.render();
+		});
+
+        // the canvas/window resize event handler
+        window.addEventListener('resize', function () {
+            engine.resize();
+        });		
+
+	}});
+
+	delete window.ARBabylonOnLoad;
+
+};
+
+if (window.ARController && ARController.getUserMediaBabylonScene) {
+	ARBabylonOnLoad();
+}
+</script>
+
+</body>
+</html>
diff --git a/examples/nft_threejs.html b/examples/nft_threejs.html
@@ -0,0 +1,116 @@
+<html>
+<head>
+<title>Pattern marker example with Three.js</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+<style>
+html,body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	text-align: center;
+	overflow-x: hidden;
+}
+.portrait canvas {
+	transform-origin: 0 0;
+	transform: rotate(-90deg) translateX(-100%);
+}
+.desktop canvas {
+ 	transform: scale(-1, 1);
+}
+</style>
+</head>
+<body>
+
+<h1>NFT marker example with Three.js</h1>
+<p>On Chrome on Android, tap the screen to start playing video stream.</p>
+<p>Show  <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/Marker%20images/pinball.jpg">Pinball image</a> to camera to display a colorful object on top of it. Tap the screen to rotate the object.
+
+<script async src="../build/artoolkit.min.js"></script>
+<script async src="js/third_party/three.js/three.js"></script>
+<script async src="../js/artoolkit.three.js"></script>
+
+<script>
+
+window.ARThreeOnLoad = function() {
+
+	ARController.getUserMediaThreeScene({maxARVideoSize: 320, cameraParam: 'data/camera_para.dat', 
+	onSuccess: function(arScene, arController, arCamera) {
+
+		document.body.className = arController.orientation;
+
+		var renderer = new THREE.WebGLRenderer({antialias: true});
+		if (arController.orientation === 'portrait') {
+			var w = (window.innerWidth / arController.videoHeight) * arController.videoWidth;
+			var h = window.innerWidth;
+			renderer.setSize(w, h);
+			renderer.domElement.style.paddingBottom = (w-h) + 'px';
+		} else {
+			if (/Android|mobile|iPad|iPhone/i.test(navigator.userAgent)) {
+				renderer.setSize(window.innerWidth, (window.innerWidth / arController.videoWidth) * arController.videoHeight);
+			} else {
+				renderer.setSize(arController.videoWidth, arController.videoHeight);
+				document.body.className += ' desktop';
+			}
+		}
+
+		document.body.insertBefore(renderer.domElement, document.body.firstChild);
+
+		var rotationV = 0;
+		var rotationTarget = 0;
+
+		renderer.domElement.addEventListener('click', function(ev) {
+			ev.preventDefault();
+			rotationTarget += 1;
+		}, false);
+
+		var sphere = new THREE.Mesh(
+			new THREE.SphereGeometry(0.5, 8, 8),
+			new THREE.MeshNormalMaterial()
+		);
+		sphere.material.shading = THREE.FlatShading;
+		sphere.position.z = 40;
+		sphere.position.x = 80;
+		sphere.position.y = 80;
+		sphere.scale.set(80,80,80);
+
+		var torus = new THREE.Mesh(
+			new THREE.TorusGeometry(0.3, 0.2, 8, 8),
+			new THREE.MeshNormalMaterial()
+		);
+		torus.material.shading = THREE.FlatShading;
+		torus.position.z = 0.5;
+		torus.rotation.x = Math.PI/2;
+
+		arController.loadNFTMarker('dataNFT/pinball', function(markerId) {
+			var markerRoot = arController.createThreeNFTMarker(markerId);
+			markerRoot.add(sphere);
+			arScene.scene.add(markerRoot);
+		});
+
+		var tick = function() {
+			arScene.process();
+
+			rotationV += (rotationTarget - sphere.rotation.z) * 0.05;
+			sphere.rotation.z += rotationV;
+			torus.rotation.y += rotationV;
+			rotationV *= 0.8;
+
+			arScene.renderOn(renderer);
+			requestAnimationFrame(tick);
+		};
+
+		tick();
+
+	}});
+
+	delete window.ARThreeOnLoad;
+
+};
+
+if (window.ARController && ARController.getUserMediaThreeScene) {
+	ARThreeOnLoad();
+}
+</script>
+
+</body>
+</html>