Sfoglia il codice sorgente

Store a reference to ARSystem in ARDemo

customisations
alemart 9 mesi fa
parent
commit
3393c3716f

+ 18
- 14
demos/hello-babylon/demo.js Vedi File

87
 
87
 
88
     /**
88
     /**
89
      * Initialization
89
      * Initialization
90
-     * @param {ARSystem} ar
91
      * @returns {Promise<void>}
90
      * @returns {Promise<void>}
92
      */
91
      */
93
-    async init(ar)
92
+    async init()
94
     {
93
     {
95
         // Do not automatically play an animation when loading GLTF models
94
         // Do not automatically play an animation when loading GLTF models
96
         BABYLON.SceneLoader.OnPluginActivatedObservable.add(loader => {
95
         BABYLON.SceneLoader.OnPluginActivatedObservable.add(loader => {
100
         });
99
         });
101
 
100
 
102
         // Change the point of view - slightly
101
         // Change the point of view - slightly
102
+        const ar = this.ar;
103
         ar.root.position.y = -0.8;
103
         ar.root.position.y = -0.8;
104
 
104
 
105
         // Initialize objects
105
         // Initialize objects
106
-        this._initLight(ar);
107
-        this._initText(ar);
108
-        this._initMagicCircle(ar);
106
+        this._initLight();
107
+        this._initText();
108
+        this._initMagicCircle();
109
 
109
 
110
         await Promise.all([
110
         await Promise.all([
111
-            this._initMage(ar),
112
-            this._initCat(ar),
111
+            this._initMage(),
112
+            this._initCat(),
113
         ]);
113
         ]);
114
 
114
 
115
         // done!
115
         // done!
118
 
118
 
119
     /**
119
     /**
120
      * Animation loop
120
      * Animation loop
121
-     * @param {ARSystem} ar
122
      * @returns {void}
121
      * @returns {void}
123
      */
122
      */
124
-    update(ar)
123
+    update()
125
     {
124
     {
125
+        const ar = this.ar;
126
         const delta = ar.session.time.delta; // given in seconds
126
         const delta = ar.session.time.delta; // given in seconds
127
 
127
 
128
         this._animateMagicCircle(delta);
128
         this._animateMagicCircle(delta);
132
     // ------------------------------------------------------------------------
132
     // ------------------------------------------------------------------------
133
 
133
 
134
 
134
 
135
-    _initLight(ar)
135
+    _initLight()
136
     {
136
     {
137
         const light = new BABYLON.HemisphericLight('light', BABYLON.Vector3.Up());
137
         const light = new BABYLON.HemisphericLight('light', BABYLON.Vector3.Up());
138
         light.intensity = 1.0;
138
         light.intensity = 1.0;
140
         light.specular.set(0, 0, 0);
140
         light.specular.set(0, 0, 0);
141
     }
141
     }
142
 
142
 
143
-    _initMagicCircle(ar)
143
+    _initMagicCircle()
144
     {
144
     {
145
         // create a magic circle
145
         // create a magic circle
146
         const magicCircle = BABYLON.MeshBuilder.CreatePlane('magic-circle', {
146
         const magicCircle = BABYLON.MeshBuilder.CreatePlane('magic-circle', {
160
         magicCircle.scaling.set(4, 4, 1);
160
         magicCircle.scaling.set(4, 4, 1);
161
 
161
 
162
         // make it a child of ar.root
162
         // make it a child of ar.root
163
+        const ar = this.ar;
163
         magicCircle.parent = ar.root;
164
         magicCircle.parent = ar.root;
164
 
165
 
165
         // save a reference
166
         // save a reference
166
         this._objects.magicCircle = magicCircle;
167
         this._objects.magicCircle = magicCircle;
167
     }
168
     }
168
 
169
 
169
-    _initText(ar)
170
+    _initText()
170
     {
171
     {
171
         const text = BABYLON.MeshBuilder.CreatePlane('text', {
172
         const text = BABYLON.MeshBuilder.CreatePlane('text', {
172
             width: 1,
173
             width: 1,
184
         text.position.set(0, 2, 0.5);
185
         text.position.set(0, 2, 0.5);
185
         text.scaling.set(3, 1.5, 1);
186
         text.scaling.set(3, 1.5, 1);
186
 
187
 
188
+        const ar = this.ar;
187
         text.parent = ar.root;
189
         text.parent = ar.root;
188
 
190
 
189
         this._objects.text = text;
191
         this._objects.text = text;
190
     }
192
     }
191
 
193
 
192
-    async _initMage(ar)
194
+    async _initMage()
193
     {
195
     {
194
         // load the mage
196
         // load the mage
195
         const gltf = await BABYLON.SceneLoader.ImportMeshAsync('', '../assets/', 'mage.glb');
197
         const gltf = await BABYLON.SceneLoader.ImportMeshAsync('', '../assets/', 'mage.glb');
202
             anim.play(true);
204
             anim.play(true);
203
 
205
 
204
         // make the mage a child of ar.root
206
         // make the mage a child of ar.root
207
+        const ar = this.ar;
205
         mage.parent = ar.root;
208
         mage.parent = ar.root;
206
 
209
 
207
         // save a reference
210
         // save a reference
208
         this._objects.mage = mage;
211
         this._objects.mage = mage;
209
     }
212
     }
210
 
213
 
211
-    async _initCat(ar)
214
+    async _initCat()
212
     {
215
     {
213
         const gltf = await BABYLON.SceneLoader.ImportMeshAsync('', '../assets/', 'cat.glb');
216
         const gltf = await BABYLON.SceneLoader.ImportMeshAsync('', '../assets/', 'cat.glb');
214
         const cat = gltf.meshes[0];
217
         const cat = gltf.meshes[0];
218
         if(anim)
221
         if(anim)
219
             anim.play(true);
222
             anim.play(true);
220
 
223
 
224
+        const ar = this.ar;
221
         cat.parent = ar.root;
225
         cat.parent = ar.root;
222
 
226
 
223
         this._objects.cat = cat;
227
         this._objects.cat = cat;

+ 20
- 14
demos/hello-three/demo.js Vedi File

177
 
177
 
178
     /**
178
     /**
179
      * Initialization
179
      * Initialization
180
-     * @param {ARSystem} ar
181
      * @returns {void}
180
      * @returns {void}
182
      */
181
      */
183
-    init(ar)
182
+    init()
184
     {
183
     {
184
+        const ar = this.ar;
185
+
185
         // Change the point of view. All virtual objects are descendants of
186
         // Change the point of view. All virtual objects are descendants of
186
         // ar.root, a node that is automatically aligned to the physical scene.
187
         // ar.root, a node that is automatically aligned to the physical scene.
187
         // Adjusting ar.root will adjust all virtual objects.
188
         // Adjusting ar.root will adjust all virtual objects.
189
         ar.root.position.set(0, -0.8, 0);
190
         ar.root.position.set(0, -0.8, 0);
190
 
191
 
191
         // Initialize objects
192
         // Initialize objects
192
-        this._initLight(ar);
193
-        this._initText(ar);
194
-        this._initMagicCircle(ar);
195
-        this._initMage(ar);
196
-        this._initCat(ar);
193
+        this._initLight();
194
+        this._initText();
195
+        this._initMagicCircle();
196
+        this._initMage();
197
+        this._initCat();
197
 
198
 
198
         // done!
199
         // done!
199
         this._initialized = true;
200
         this._initialized = true;
201
 
202
 
202
     /**
203
     /**
203
      * Animation loop
204
      * Animation loop
204
-     * @param {ARSystem} ar
205
      * @returns {void}
205
      * @returns {void}
206
      */
206
      */
207
-    update(ar)
207
+    update()
208
     {
208
     {
209
+        const ar = this.ar;
209
         const delta = ar.session.time.delta; // given in seconds
210
         const delta = ar.session.time.delta; // given in seconds
210
 
211
 
211
         // animate the objects of the scene
212
         // animate the objects of the scene
218
     // ------------------------------------------------------------------------
219
     // ------------------------------------------------------------------------
219
 
220
 
220
 
221
 
221
-    _initLight(ar)
222
+    _initLight()
222
     {
223
     {
223
         const ambientLight = new THREE.AmbientLight(0xffffff);
224
         const ambientLight = new THREE.AmbientLight(0xffffff);
224
         ambientLight.intensity = 1.5;
225
         ambientLight.intensity = 1.5;
225
 
226
 
227
+        const ar = this.ar;
226
         ar.scene.add(ambientLight);
228
         ar.scene.add(ambientLight);
227
     }
229
     }
228
 
230
 
229
-    _initMagicCircle(ar)
231
+    _initMagicCircle()
230
     {
232
     {
231
         // create a magic circle
233
         // create a magic circle
232
         const magicCircle = Utils.createImagePlane('../assets/magic-circle.png');
234
         const magicCircle = Utils.createImagePlane('../assets/magic-circle.png');
235
         magicCircle.scale.set(4, 4, 1);
237
         magicCircle.scale.set(4, 4, 1);
236
 
238
 
237
         // make it a child of ar.root
239
         // make it a child of ar.root
240
+        const ar = this.ar;
238
         ar.root.add(magicCircle);
241
         ar.root.add(magicCircle);
239
 
242
 
240
         // save a reference
243
         // save a reference
241
         this._objects.magicCircle = magicCircle;
244
         this._objects.magicCircle = magicCircle;
242
     }
245
     }
243
 
246
 
244
-    _initText(ar)
247
+    _initText()
245
     {
248
     {
246
         const text = Utils.createImagePlane('../assets/it-works.png');
249
         const text = Utils.createImagePlane('../assets/it-works.png');
247
         text.material.transparent = true;
250
         text.material.transparent = true;
250
         text.scale.set(3, 1.5, 1);
253
         text.scale.set(3, 1.5, 1);
251
         text.rotateX(Math.PI / 2);
254
         text.rotateX(Math.PI / 2);
252
 
255
 
256
+        const ar = this.ar;
253
         ar.root.add(text);
257
         ar.root.add(text);
254
 
258
 
255
         this._objects.text = text;
259
         this._objects.text = text;
256
     }
260
     }
257
 
261
 
258
-    _initMage(ar)
262
+    _initMage()
259
     {
263
     {
260
         // load the mage
264
         // load the mage
261
         const gltf = this._objects.gltf.mage;
265
         const gltf = this._objects.gltf.mage;
267
         mageAction.play();
271
         mageAction.play();
268
 
272
 
269
         // make the mage a child of ar.root
273
         // make the mage a child of ar.root
274
+        const ar = this.ar;
270
         ar.root.add(mage);
275
         ar.root.add(mage);
271
 
276
 
272
         // save references
277
         // save references
274
         this._objects.mageAction = mageAction;
279
         this._objects.mageAction = mageAction;
275
     }
280
     }
276
 
281
 
277
-    _initCat(ar)
282
+    _initCat()
278
     {
283
     {
279
         const gltf = this._objects.gltf.cat;
284
         const gltf = this._objects.gltf.cat;
280
         const cat = gltf.scene;
285
         const cat = gltf.scene;
283
         const catAction = Utils.createAnimationAction(gltf, 'Cheer');
288
         const catAction = Utils.createAnimationAction(gltf, 'Cheer');
284
         catAction.play();
289
         catAction.play();
285
 
290
 
291
+        const ar = this.ar;
286
         ar.root.add(cat);
292
         ar.root.add(cat);
287
 
293
 
288
         this._objects.cat = cat;
294
         this._objects.cat = cat;

+ 28
- 12
plugins/babylon-with-encantar.js Vedi File

17
 {
17
 {
18
     /**
18
     /**
19
      * Start the AR session
19
      * Start the AR session
20
-     * @abstract
21
      * @returns {Promise<Session> | SpeedyPromise<Session>}
20
      * @returns {Promise<Session> | SpeedyPromise<Session>}
21
+     * @abstract
22
      */
22
      */
23
     startSession()
23
     startSession()
24
     {
24
     {
27
 
27
 
28
     /**
28
     /**
29
      * Initialization
29
      * Initialization
30
-     * @abstract
31
-     * @param {ARSystem} ar
32
      * @returns {void | Promise<void> | SpeedyPromise<void>}
30
      * @returns {void | Promise<void> | SpeedyPromise<void>}
31
+     * @abstract
33
      */
32
      */
34
-    init(ar)
33
+    init()
35
     {
34
     {
36
         throw new Error('Abstract method');
35
         throw new Error('Abstract method');
37
     }
36
     }
38
 
37
 
39
     /**
38
     /**
40
      * Animation loop
39
      * Animation loop
41
-     * @abstract
42
-     * @param {ARSystem} ar
43
      * @returns {void}
40
      * @returns {void}
41
+     * @abstract
44
      */
42
      */
45
-    update(ar)
43
+    update()
46
     {
44
     {
47
         throw new Error('Abstract method');
45
         throw new Error('Abstract method');
48
     }
46
     }
49
 
47
 
50
     /**
48
     /**
51
      * Release resources
49
      * Release resources
52
-     * @param {ARSystem} ar
53
      * @returns {void}
50
      * @returns {void}
54
      */
51
      */
55
-    release(ar)
52
+    release()
56
     {
53
     {
57
         // optional implementation
54
         // optional implementation
58
     }
55
     }
66
         // optional implementation
63
         // optional implementation
67
         return Promise.resolve();
64
         return Promise.resolve();
68
     }
65
     }
66
+
67
+    /**
68
+     * A reference to the ARSystem
69
+     * @returns {ARSystem | null}
70
+     */
71
+    get ar()
72
+    {
73
+        return this._ar;
74
+    }
75
+
76
+    /**
77
+     * Constructor
78
+     */
79
+    constructor()
80
+    {
81
+        this._ar = null;
82
+    }
69
 }
83
 }
70
 
84
 
71
 /**
85
 /**
244
         mix(frame);
258
         mix(frame);
245
 
259
 
246
         ar._engine.beginFrame();
260
         ar._engine.beginFrame();
247
-        demo.update(ar);
261
+        demo.update();
248
         ar._scene.render(false);
262
         ar._scene.render(false);
249
         ar._engine.endFrame();
263
         ar._engine.endFrame();
250
 
264
 
307
     .then(() => demo.startSession()) // Promise or SpeedyPromise
321
     .then(() => demo.startSession()) // Promise or SpeedyPromise
308
     .then(session => {
322
     .then(session => {
309
 
323
 
324
+        demo._ar = ar;
325
+
310
         ar._session = session;
326
         ar._session = session;
311
 
327
 
312
         ar._engine = new BABYLON.Engine(session.viewport.canvas, false, {
328
         ar._engine = new BABYLON.Engine(session.viewport.canvas, false, {
352
 
368
 
353
         return Promise.resolve()
369
         return Promise.resolve()
354
         .then(() => {
370
         .then(() => {
355
-            return demo.init(ar);
371
+            return demo.init();
356
         })
372
         })
357
         .then(() => {
373
         .then(() => {
358
-            session.addEventListener('end', event => { demo.release(ar); });
374
+            session.addEventListener('end', event => { demo.release(); });
359
             session.requestAnimationFrame(animate);
375
             session.requestAnimationFrame(animate);
360
             return ar;
376
             return ar;
361
         })
377
         })

+ 27
- 11
plugins/three-with-encantar.js Vedi File

27
 
27
 
28
     /**
28
     /**
29
      * Initialization
29
      * Initialization
30
-     * @abstract
31
-     * @param {ARSystem} ar
32
      * @returns {void | Promise<void> | SpeedyPromise<void>}
30
      * @returns {void | Promise<void> | SpeedyPromise<void>}
31
+     * @abstract
33
      */
32
      */
34
-    init(ar)
33
+    init()
35
     {
34
     {
36
         throw new Error('Abstract method');
35
         throw new Error('Abstract method');
37
     }
36
     }
38
 
37
 
39
     /**
38
     /**
40
      * Animation loop
39
      * Animation loop
41
-     * @abstract
42
-     * @param {ARSystem} ar
43
      * @returns {void}
40
      * @returns {void}
41
+     * @abstract
44
      */
42
      */
45
-    update(ar)
43
+    update()
46
     {
44
     {
47
         throw new Error('Abstract method');
45
         throw new Error('Abstract method');
48
     }
46
     }
49
 
47
 
50
     /**
48
     /**
51
      * Release resources
49
      * Release resources
52
-     * @param {ARSystem} ar
53
      * @returns {void}
50
      * @returns {void}
54
      */
51
      */
55
-    release(ar)
52
+    release()
56
     {
53
     {
57
         // optional implementation
54
         // optional implementation
58
     }
55
     }
66
         // optional implementation
63
         // optional implementation
67
         return Promise.resolve();
64
         return Promise.resolve();
68
     }
65
     }
66
+
67
+    /**
68
+     * A reference to the ARSystem
69
+     * @returns {ARSystem | null}
70
+     */
71
+    get ar()
72
+    {
73
+        return this._ar;
74
+    }
75
+
76
+    /**
77
+     * Constructor
78
+     */
79
+    constructor()
80
+    {
81
+        this._ar = null;
82
+    }
69
 }
83
 }
70
 
84
 
71
 /**
85
 /**
237
         ar._frame = frame;
251
         ar._frame = frame;
238
         mix(frame);
252
         mix(frame);
239
 
253
 
240
-        demo.update(ar);
254
+        demo.update();
241
 
255
 
242
         ar._renderer.render(ar._scene, ar._camera);
256
         ar._renderer.render(ar._scene, ar._camera);
243
         ar._session.requestAnimationFrame(animate);
257
         ar._session.requestAnimationFrame(animate);
289
     .then(() => demo.startSession()) // Promise or SpeedyPromise
303
     .then(() => demo.startSession()) // Promise or SpeedyPromise
290
     .then(session => {
304
     .then(session => {
291
 
305
 
306
+        demo._ar = ar;
307
+
292
         ar._session = session;
308
         ar._session = session;
293
 
309
 
294
         ar._scene = new THREE.Scene();
310
         ar._scene = new THREE.Scene();
324
 
340
 
325
         return Promise.resolve()
341
         return Promise.resolve()
326
         .then(() => {
342
         .then(() => {
327
-            return demo.init(ar);
343
+            return demo.init();
328
         })
344
         })
329
         .then(() => {
345
         .then(() => {
330
-            session.addEventListener('end', event => { demo.release(ar); });
346
+            session.addEventListener('end', event => { demo.release(); });
331
             session.requestAnimationFrame(animate);
347
             session.requestAnimationFrame(animate);
332
             return ar;
348
             return ar;
333
         })
349
         })

Loading…
Annulla
Salva