Eigene JavaScript-Komponenten
Wir machen dort weiter, wo wir im Schnellstart aufgehört haben.
Überblick
Ziel dieses Tutorials ist es, dich damit vertraut zu machen, wie du deinem Projekt benutzerdefinierte Logik hinzufügst.
Wir werden zwei Skripte erstellen, die es ermöglichen, die Anzahl der Frames zu zählen, in denen ein Objekt betrachtet wurde.
Ein Skript wird zur Kamera hinzugefügt und wird Strahlen werfen, um zu überprüfen, ob wir ein bestimmtes Objekt ansehen. Das andere Skript wird zu einem Objekt hinzugefügt, um die Bildanzahl anzuzeigen.
JavaScript Neuladen
Um unseren Arbeitsablauf so reibungslos wie möglich zu gestalten, überwacht der Editor automatisch Änderungen an deinen JavaScript-Dateien und analysiert sie beim Speichern.
Wenn du die App im Browser laufen hast, wird sie sogar die Seite für dich neu laden mit den geänderten Quellen.
Erstelle eine JavaScript-Komponente
Klicke mit der rechten Maustaste auf den leeren Bereich im “Asset Browser” und füge eine neue JavaScript-Komponente hinzu.
Benenne die Komponente counting-gaze.js.
Durch Doppelklicken auf die Datei wird diese mit der Anwendung geöffnet, mit der dein System .js-Dateien öffnen soll.
Code
Und schließlich füllen wir die Komponente mit Leben. Der folgende Code sendet in jedem Frame einen Strahl in die Szene:
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 /* Hole die Übersetzung dieses Objekts und speichere sie in "origin" */
15 this.object.getPositionWorld(this.origin);
16 /* Hole die Richtung dieses Objekts und speichere sie in "dir" */
17 this.object.getForwardWorld(this.dir);
18
19 /* Sende einen Strahl in die Szene und prüfe, ob er ein Objekt in
20 * der Kollisionsgruppe "1" oder "2" trifft */
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: Wir werden später stattdessen den Zähler
28 // auf dem getroffenen Objekt erhöhen!
29 console.log('Raycast traf Objekt:', o.name);
30 }
31 }
32 }
33}Im Moment drucken wir nur die Namen der Objekte, die wir mit unserem Strahl treffen.
Komponente zu Objekt hinzufügen
Diese Komponente wird nicht automatisch ausgeführt. Wir müssen sie an die Kamera anhängen!
Ausführen
Um die Komponente in Aktion zu sehen, “Packen” und “Browser öffnen”.
Wenn du die JavaScript-Konsole in deinem Browser mit Strg + Umschalt + C öffnest, wirst du bemerken, dass die Komponente initialisiert wurde.
Es werden jedoch keine Objektnamen gedruckt. this.engine.scene.rayCast() verwendet das Kollisionssystem, das nur mit collider-Komponenten funktioniert. Um sicherzustellen, dass der Strahl etwas trifft, müssen wir mehr Komponenten hinzufügen!
Kollision
Füge ein Kind zum Postfach-Objekt hinzu, wie im folgenden Screenshot gezeigt.
Füge diesem neuen Kindobjekt eine collision-Komponente hinzu.
Setze den Radius z.B. auf 0.15.
Mit dieser Einrichtung können wir “Packen” und sehen, dass der Strahl funktioniert.
Zählen und Anzeigen
Wir müssen den Stand zählen und schließlich mit einer Textkomponente anzeigen.
Füge eine “text”-Komponente zu unserem “Collider”-Objekt hinzu und ändere den Text auf “0”.
Dann füge eine neue JavaScript-Quelldatei mit dem Namen gaze-counter.js hinzu.
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}Du wirst die msg-Eigenschaft bemerken. Der Editor wird automatisch ein Eingabefeld dafür generieren, wenn wir die Komponente dem “Collider”-Objekt hinzufügen:
Ersetze schließlich den // TODO-Kommentar in counting-gaze.js mit dem folgenden:
Ergebnis
“Packen” und überprüfe den Browser. Du siehst jetzt das Endergebnis!
Zusammenfassung
Wonderland Engine ermöglicht dir die Nutzung jeder JavaScript-Bibliothek, die im Browser läuft.
Mit dem automatischen Neuladen erlaubt der Arbeitsablauf sehr schnelle Iterationen.
Finde die Wonderland Engine JavaScript API-Referenz hier und viele kompakte Tutorials.