1
+ <!DOCTYPE html>
2
+ < meta name ='viewport ' content ='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 '>
3
+ <!-- three.js and stats.js library -->
4
+ < script src ='js/three.min.js '> </ script >
5
+ < script src ='js/stats.min.js '> </ script >
6
+ <!-- include threex.artoolkit -->
7
+ < script src ="../dist/ar.js "> </ script >
8
+ <!--<script>THREEx.ArToolkitContext.baseURL = '../'</script>-->
9
+
10
+ < body style ='margin : 0px; overflow: hidden; font-family: Monospace; '>
11
+ < div style ='position: absolute; top: 10px; width:100%; text-align: center;z-index:1 ' ; >
12
+ < a href ='https://github.com/AR-js-org/AR.js-threejs/ ' target ='_blank '> AR.js</ a > - developement playground
13
+ < br />
14
+ Contact me any time at < a href ='https://twitter.com/nicolocarp ' target ='_blank '> @nicolocarp</ a >
15
+ </ div >
16
+ < script >
17
+ //////////////////////////////////////////////////////////////////////////////////
18
+ // Init
19
+ //////////////////////////////////////////////////////////////////////////////////
20
+
21
+ // init renderer
22
+ var renderer = new THREE . WebGLRenderer ( {
23
+ // antialias : true,
24
+ alpha : true
25
+ } ) ;
26
+ renderer . setClearColor ( new THREE . Color ( 'lightgrey' ) , 0 )
27
+ // renderer.setPixelRatio( 2 );
28
+ renderer . setSize ( window . innerWidth , window . innerHeight ) ;
29
+ renderer . domElement . style . position = 'absolute'
30
+ renderer . domElement . style . top = '0px'
31
+ renderer . domElement . style . left = '0px'
32
+ document . body . appendChild ( renderer . domElement ) ;
33
+
34
+ // array of functions for the rendering loop
35
+ var onRenderFcts = [ ] ;
36
+ var arToolkitContext , arMarkerControls , markerRoot ;
37
+
38
+ // init scene and camera
39
+ var scene = new THREE . Scene ( ) ;
40
+
41
+ var ambient = new THREE . AmbientLight ( 0x666666 ) ;
42
+ scene . add ( ambient ) ;
43
+
44
+ var directionalLight = new THREE . DirectionalLight ( 0x887766 ) ;
45
+ directionalLight . position . set ( - 1 , 1 , 1 ) . normalize ( ) ;
46
+ scene . add ( directionalLight ) ;
47
+
48
+ //////////////////////////////////////////////////////////////////////////////////
49
+ // Initialize a basic camera
50
+ //////////////////////////////////////////////////////////////////////////////////
51
+
52
+ // Create a camera
53
+ var camera = new THREE . Camera ( ) ;
54
+ scene . add ( camera ) ;
55
+
56
+ markerRoot = new THREE . Group
57
+ scene . add ( markerRoot )
58
+
59
+ ////////////////////////////////////////////////////////////////////////////////
60
+ // handle arToolkitSource
61
+ ////////////////////////////////////////////////////////////////////////////////
62
+
63
+ var arToolkitSource = new THREEx . ArToolkitSource ( {
64
+ // to read from the webcam
65
+ sourceType : 'webcam' ,
66
+
67
+ // // to read from an image
68
+ // sourceType : 'image',
69
+ // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
70
+ // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/armchair.jpg',
71
+
72
+ // to read from a video
73
+ // sourceType : 'video',
74
+ // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
75
+ } )
76
+
77
+ arToolkitSource . init ( ( ) => {
78
+ arToolkitSource . domElement . addEventListener ( 'canplay' , ( ) => {
79
+ console . log (
80
+ 'canplay' ,
81
+ 'actual source dimensions' ,
82
+ arToolkitSource . domElement . videoWidth ,
83
+ arToolkitSource . domElement . videoHeight
84
+ ) ;
85
+
86
+ initARContext ( ) ;
87
+ } ) ;
88
+
89
+ window . arToolkitSource = arToolkitSource ;
90
+ onResize ( ) ;
91
+ } ) ;
92
+
93
+ // handle resize
94
+ window . addEventListener ( 'resize' , function ( ) {
95
+ onResize ( )
96
+ } )
97
+ function onResize ( ) {
98
+ arToolkitSource . onResizeElement ( )
99
+ arToolkitSource . copyElementSizeTo ( renderer . domElement )
100
+ if ( window . arToolkitContext . arController !== null ) {
101
+ arToolkitSource . copyElementSizeTo ( window . arToolkitContext . arController . canvas )
102
+ }
103
+ }
104
+
105
+ ////////////////////////////////////////////////////////////////////////////////
106
+ // initialize arToolkitContext
107
+ ////////////////////////////////////////////////////////////////////////////////
108
+
109
+ // create atToolkitContext
110
+ function initARContext ( ) {
111
+ console . log ( 'initARContext()' ) ;
112
+
113
+ // CONTEXT
114
+ arToolkitContext = new THREEx . ArToolkitContext ( {
115
+ cameraParametersUrl : THREEx . ArToolkitContext . baseURL + '../data/data/camera_para.dat' ,
116
+ // debug: true,
117
+ // detectionMode: 'mono_and_matrix',
118
+ detectionMode : 'mono' ,
119
+ // detectionMode: 'color_and_matrix',
120
+ // matrixCodeType: '3x3',
121
+
122
+ canvasWidth : 80 * 3 ,
123
+ canvasHeight : 60 * 3 ,
124
+
125
+ maxDetectionRate : 30 ,
126
+ } )
127
+
128
+ arToolkitContext . init ( ( ) => {
129
+ camera . projectionMatrix . copy ( arToolkitContext . getProjectionMatrix ( ) ) ;
130
+
131
+ arToolkitContext . arController . orientation = getSourceOrientation ( ) ;
132
+ arToolkitContext . arController . options . orientation = getSourceOrientation ( ) ;
133
+
134
+ console . log ( 'arToolkitContext' , arToolkitContext ) ;
135
+ window . arToolkitContext = arToolkitContext ;
136
+ } ) ;
137
+
138
+
139
+
140
+ // MARKER
141
+ arMarkerControls = new THREEx . ArMarkerControls ( arToolkitContext , markerRoot , {
142
+ type : 'pattern' ,
143
+ patternUrl : THREEx . ArToolkitContext . baseURL + '../data/data/patt.hiro' ,
144
+ } )
145
+
146
+ console . log ( 'ArMarkerControls' , arMarkerControls ) ;
147
+ window . arMarkerControls = arMarkerControls ;
148
+ }
149
+
150
+ function getSourceOrientation ( ) {
151
+ if ( ! arToolkitSource ) {
152
+ return null ;
153
+ }
154
+
155
+ console . log (
156
+ 'actual source dimensions' ,
157
+ arToolkitSource . domElement . videoWidth ,
158
+ arToolkitSource . domElement . videoHeight
159
+ ) ;
160
+
161
+ if ( arToolkitSource . domElement . videoWidth > arToolkitSource . domElement . videoHeight ) {
162
+ console . log ( 'source orientation' , 'landscape' ) ;
163
+ return 'landscape' ;
164
+ } else {
165
+ console . log ( 'source orientation' , 'portrait' ) ;
166
+ return 'portrait' ;
167
+ }
168
+ }
169
+
170
+ // update artoolkit on every frame
171
+ onRenderFcts . push ( function ( ) {
172
+ if ( ! arToolkitContext || ! arToolkitSource || ! arToolkitSource . ready ) {
173
+ return ;
174
+ }
175
+
176
+ arToolkitContext . update ( arToolkitSource . domElement )
177
+ } )
178
+
179
+
180
+ // build a smoothedControls
181
+ var smoothedRoot = new THREE . Group ( )
182
+ scene . add ( smoothedRoot )
183
+ var smoothedControls = new THREEx . ArSmoothedControls ( smoothedRoot , {
184
+ lerpPosition : 0.4 ,
185
+ lerpQuaternion : 0.3 ,
186
+ lerpScale : 1 ,
187
+ // minVisibleDelay: 1,
188
+ // minUnvisibleDelay: 1,
189
+ } )
190
+ onRenderFcts . push ( function ( delta ) {
191
+ smoothedControls . update ( markerRoot )
192
+ } )
193
+
194
+ // smoothedControls.addEventListener('becameVisible', function(){
195
+ // console.log('becameVisible event notified')
196
+ // })
197
+ // smoothedControls.addEventListener('becameUnVisible', function(){
198
+ // console.log('becameUnVisible event notified')
199
+ // })
200
+
201
+ //////////////////////////////////////////////////////////////////////////////////
202
+ // add an object in the scene
203
+ //////////////////////////////////////////////////////////////////////////////////
204
+
205
+ // var arWorldRoot = markerRoot
206
+ var arWorldRoot = smoothedRoot
207
+
208
+ var mesh = new THREE . AxesHelper ( )
209
+ // markerRoot.add(mesh)
210
+ arWorldRoot . add ( mesh )
211
+
212
+ // add a torus knot
213
+ var geometry = new THREE . BoxGeometry ( 1 , 1 , 1 ) ;
214
+ var material = new THREE . MeshNormalMaterial ( {
215
+ transparent : true ,
216
+ opacity : 0.5 ,
217
+ side : THREE . DoubleSide
218
+ } )
219
+ var mesh = new THREE . Mesh ( geometry , material ) ;
220
+ mesh . position . y = geometry . parameters . height / 2
221
+ // markerRoot.add( mesh );
222
+ arWorldRoot . add ( mesh )
223
+
224
+ var geometry = new THREE . TorusKnotGeometry ( 0.3 , 0.1 , 64 , 16 ) ;
225
+ var material = new THREE . MeshNormalMaterial ( ) ;
226
+ var mesh = new THREE . Mesh ( geometry , material ) ;
227
+ mesh . position . y = 0.5
228
+ // markerRoot.add( mesh );
229
+ arWorldRoot . add ( mesh ) ;
230
+
231
+ onRenderFcts . push ( function ( delta ) {
232
+ mesh . rotation . x += delta * Math . PI
233
+ } )
234
+
235
+ //////////////////////////////////////////////////////////////////////////////////
236
+ // render the whole thing on the page
237
+ //////////////////////////////////////////////////////////////////////////////////
238
+ var stats = new Stats ( ) ;
239
+ document . body . appendChild ( stats . dom ) ;
240
+ // render the scene
241
+ onRenderFcts . push ( function ( ) {
242
+ renderer . render ( scene , camera ) ;
243
+ stats . update ( ) ;
244
+ } )
245
+
246
+ // run the rendering loop
247
+ var lastTimeMsec = null
248
+ requestAnimationFrame ( function animate ( nowMsec ) {
249
+ // keep looping
250
+ requestAnimationFrame ( animate ) ;
251
+ // measure time
252
+ lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60
253
+ var deltaMsec = Math . min ( 200 , nowMsec - lastTimeMsec )
254
+ lastTimeMsec = nowMsec
255
+ // call each update function
256
+ onRenderFcts . forEach ( function ( onRenderFct ) {
257
+ onRenderFct ( deltaMsec / 1000 , nowMsec / 1000 )
258
+ } )
259
+ } )
260
+ </ script >
261
+ </ body >
0 commit comments