-
Notifications
You must be signed in to change notification settings - Fork 18
/
JSARToolkit-Wrapper_Demo.html
106 lines (79 loc) · 3.54 KB
/
JSARToolkit-Wrapper_Demo.html
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
<!doctype html>
<head>
<title>JSARToolkit Wrapper</title>
<!-- Required Scripts -->
<script src="js/JSARToolkit-Wrapper.js"></script> <!-- A wrapper to make it easier to work with ARToolkit. -->
<script src="js/JSARToolkit.js"></script> <!-- A JavaScript Conversion of Flash Augmented Reality Toolkit. -->
<script src="js/magi.js"></script> <!-- The 3D library required to draw over the markers. -->
<!-- Required Scripts-->
<!-- Adding 3D WebGL Models exported from Blender3D -->
<!-- Load Blender Models into a JavaScript Array -->
<script src="model.html5-logo.js"></script>
<!-- Create WebGL Objects from the JavaScript Array of Blender3D Objects -->
<script src="js/blender_export.js"></script>
</head>
<body>
<div id="DOMTarget"></div>
</body>
<!-- Example Useage Script -->
<script>
(function( global, doc ){
// When the DOM has finished loading...
function initialize(){
// Example of creating a new tracker object with all possible options
var myTracker = jsartoolkit.tracker({
src : 'my-video.webm', // Source of the video file
autoplay : true, // Does the video start automatically
repeat : true, // Loop the video
volume : 0, // Volume of audio from video source
target : doc.getElementById('DOMTarget'), // The DOM element in which to append the canvas
width : 720, // Width of the final output
height : 360, // Height of the final output
threshold : 100, // Adjust tracking-threshold to suit video lighting
ratio : 0.5, // Adjust size of hidden tracking-canvas (1 = same as video size)
debug : false // Add a debug canvas to the DOM target that will help when adjusting the threshold
});
// Add an image to the first Augmented Reality marker
myTracker.marker(0).image('my-image_01.png');
// Add Blender3D models to Augmented Reality markers
myTracker.marker(2).model('HTML5_Logo001');
// Adjust properties of Marker_0
myTracker.marker(0)
.scale(1)
.axis(0, 0, 1)
.angle(0)
.position(0,0,0)
;
// A callback can be fired when an image has been loaded
myTracker.marker(1).image('my-image_02.png', function( e ){
//console.log( 'Image loaded!', e );
});
// Add new images for two more Markers
myTracker.marker(2).image('my-image_03.png');
myTracker.marker(3).image('my-image_04.png');
/* OTHER USAGE:
// Update the image for Marker_0
myTracker.marker(0).image('my-image_04.png');
// Animate the properties of Marker_0 on a timer
var interval = global.setInterval( function(){
var date = + new Date(),
scl = 1.5 + (Math.sin( date/200 ) * 0.5),
axs = Math.cos( date/300 ),
posX = Math.sin( date/300 ),
posY = Math.cos( date/300 )
;
myTracker.marker(0)
.scale(scl)
.axis(0, axs, 0)
.position(posY, posX, 0)
.angle(date / 230)
;
}, 20);
// Access the Tracker's Video Element and update it's currentTime
// myTracker.video.currentTime = 1;
*/
};
// Call the initialize function when the page finishes loading
doc.addEventListener( 'DOMContentLoaded', function(){ initialize(); }, false );
})( window, document );
</script>