jsartoolkit5/examples/barcode_threejs.html at a66841c23cd5aef4f34eab52bc1f8c454e732d7b · artoolkitx/jsartoolkit5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>
<head>
<title>Barcode 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>Barcode 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/artoolkitx/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a> to camera to display a colorful sphere on top of it. Tap the sphere to rotate it.

<p>&larr; <a href="index.html">Back to examples</a></p>

<script async src="../build/artoolkit.debug.js"></script>
<script src="../js/artoolkit.api.js"></script>
<script async src="js/third_party/three.js/three.min.js"></script>
<script async src="../js/artoolkit.three.js"></script>

<script>

window.ARThreeOnLoad = function() {

	ARController.getUserMediaThreeScene({maxARVideoSize: 320, cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat',
	onSuccess: function(arScene, arController, arCamera) {

		document.body.className = arController.orientation;

		arController.setPatternDetectionMode(artoolkit.AR_MATRIX_CODE_DETECTION);

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

		// See /doc/patterns/Matrix code 3x3 (72dpi)/20.png
		var markerRoot = arController.createThreeBarcodeMarker(20);

		var sphere = new THREE.Mesh(
			new THREE.SphereGeometry(0.5, 8, 8),
			new THREE.MeshNormalMaterial()
		);
		sphere.material.flatShading;
		sphere.position.z = 0.5;
		markerRoot.add(sphere);
		arScene.scene.add(markerRoot);

		var rotationV = 0;
		var rotationTarget = 0;

		renderer.domElement.addEventListener('click', function(ev) {
			ev.preventDefault();
			rotationTarget += 1;
		}, false);

		var tick = function() {
			arScene.process();
			arScene.renderOn(renderer);
			rotationV += (rotationTarget - sphere.rotation.z) * 0.05;
			sphere.rotation.z += rotationV;
			rotationV *= 0.8;

			requestAnimationFrame(tick);
		};

		tick();

	}});

	delete window.ARThreeOnLoad;

};

if (window.ARController && ARController.getUserMediaThreeScene) {
	ARThreeOnLoad();
}

</script>

</body>
</html>