Componenti JavaScript Personalizzati
Continuiamo da dove ci siamo interrotti in Introduzione.
Panoramica
Lo scopo di questo tutorial è farti familiarizzare con l’aggiunta di logica personalizzata al tuo progetto.
Creeremo due script che permettono di contare il numero di frame in cui un oggetto è stato osservato.
Uno script verrà aggiunto alla fotocamera e lancerà raggi per controllare se stiamo guardando un oggetto specifico. L’altro verrà aggiunto a un oggetto per visualizzare il conteggio dei frame.
Ricaricamento JavaScript
Per rendere il nostro flusso di lavoro il più fluido possibile, l’editor controllerà automaticamente le modifiche ai tuoi file JavaScript e li analizzerà al salvataggio.
Se stai eseguendo l’app nel browser, ricaricherà anche la pagina per te con le sorgenti aggiornate.
Crea un Componente JavaScript
Fai clic destro nello spazio vuoto del “Browser delle Risorse” e aggiungi un nuovo componente JavaScript.
Dai al componente il nome counting-gaze.js.
Facendo doppio clic sul file, verrà aperto con l’applicazione che hai configurato nel tuo sistema per aprire i file .js.
Codice
Infine, riempiamo il componente di vita. Il codice seguente invia un raggio nella scena ad ogni frame:
1import {Component} from '@wonderlandengine/api';
2
3export class CountingGaze extends Component {
4 static TypeName = 'counting-gaze';
5
6 origin = [0, 0, 0];
7 dir = [0, 0, 0];
8
9 init() {
10 console.log('Counting gaze initialized');
11 }
12
13 update() {
14 /* Ottieni la traslazione di questo oggetto e memorizzala in "origin" */
15 this.object.getPositionWorld(this.origin);
16 /* Ottieni la direzione di questo oggetto e memorizzala in "dir" */
17 this.object.getForwardWorld(this.dir);
18
19 /* Invia un raggio nella scena e vedi se colpisce un oggetto nei
20 * gruppi di collisione "1" o "2" */
21 const rayHit = this.engine.scene.rayCast(
22 this.origin, this.dir, (1 << 1) | (1 << 2));
23 if(rayHit.hitCount > 0) {
24 for(let i = 0; i < rayHit.hitCount; ++i) {
25 let o = rayHit.objects[i];
26
27 // TODO: Contare il contatore sull'oggetto colpito qui, invece!
28 console.log('Raycast ha colpito l\'oggetto:', o.name);
29 }
30 }
31 }
32}Per ora stiamo solo stampando i nomi degli oggetti che colpiamo con il nostro raggio.
Aggiungi Componente all’Oggetto
Questo componente non viene eseguito automaticamente. Dobbiamo attaccarlo alla fotocamera!
Esegui
Per vedere il componente in azione, “Package” e “Open Browser”.
Se apri la console JavaScript nel tuo browser con Ctrl + Shift + C, noterai che il componente è stato inizializzato.
Tuttavia, non vengono stampati nomi di oggetti. this.engine.scene.rayCast() utilizza il sistema di collisione, che funziona solo con componenti collider. Per assicurarti che il raggio colpisca qualcosa, dobbiamo aggiungere più componenti!
Collisione
Aggiungi un figlio all’oggetto mailbox come mostrato nel seguente screenshot.
Aggiungi un componente collision a quel nuovo oggetto figlio.
Imposta il raggio a, ad esempio, 0.15.
Con questa configurazione, possiamo “Package” e vedere che il raggio funziona.
Conteggio e Visualizzazione
Dobbiamo tenere traccia del conteggio e infine visualizzarlo con un componente testo.
Aggiungi un componente “text” al nostro oggetto “Collider” e cambia il testo in “0”.
Poi aggiungi un nuovo file sorgente JavaScript con il nome gaze-counter.js.
1import {Component, Property} from '@wonderlandengine/api';
2
3export class GazeCounter extends Component {
4 static TypeName = 'gaze-counter';
5 static Properties = {
6 msg: Property.string('i')
7 };
8
9 count = 0;
10
11 init() {
12 console.log('Gaze counter initialized');
13 }
14
15 start() {
16 this.textComp = this.object.getComponent('text');
17 }
18
19 update() {
20 this.textComp.text = `${this.msg} ${this.count}`;
21 }
22}Noterai la proprietà msg qui. L’editor genererà automaticamente un campo di input per essa, quando aggiungeremo il componente all’oggetto “Collider”:
Infine, sostituisci il commento // TODO in counting-gaze.js con il seguente:
Risultato
“Package” e controlla il browser. Vedrai ora il risultato finale!
Sommario
Wonderland Engine ti consente di utilizzare qualsiasi libreria JavaScript che gira nel browser.
Con il ricaricamento automatico, il flusso di lavoro permette iterazioni molto rapide.
Trova il riferimento API JavaScript di Wonderland Engine qui e molti tutorial a piccoli passi.