A-Frame ist ein webbasiertes Framework, mit dem Sie verschiedene Anwendungen, Spiele und Szenen in Virtual Reality (VR) erstellen können. Alle oben genannten Funktionen sind direkt im Browser Ihres VR-Helms verfügbar. Dieses Tool ist nützlich für diejenigen, die VR-Spiele in einem Browser entwickeln möchten. Es kann beispielsweise als Plattform zum Erstellen von Web-VR-Anwendungen, Websites und Zielseiten nützlich sein. Die Verwendung von Web BP ist nur durch Ihre Vorstellungskraft begrenzt. Nebenbei kann ich einige Bereiche menschlicher Aktivitäten einbringen, in denen BP nützlich sein kann: Bildung, Medizin, Sport, Verkauf, Freizeit.
Was ist drin?
A-Frame wird nicht in reinem WebGL von 0 geschrieben, sondern basiert auf der
Three.js- Bibliothek. Daher empfehle ich, dass Sie zuerst die Grundkonzepte von Three.js verstehen, bevor Sie mit A-Frame arbeiten. Dies ist jedoch nicht erforderlich, da A-Frame so konzipiert ist, dass Sie am wenigsten über das Rendern von Geometrie nachdenken und sich mehr auf die Logik Ihrer Anwendung konzentrieren . Deshalb er und der Rahmen.
Zu diesem Zweck postuliert A-Frame drei Hauptpunkte, über die wir später sprechen werden.
A-Frame arbeitet mit HTML
Viele grundlegende A-Frame-Elemente wie Szene, Kamera, Box, Kugel usw. werden der Szene durch gleichnamige Tags mit dem Präfix
a- hinzugefügt. Jeder ähnliche Artikel wird als benutzerdefiniert registriert. A-Frame (0.8.0) verwendet derzeit die v0-Spezifikation.
<a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> </a-scene>
Dieser kleine Code zeichnet eine WebGL-Szene, zu der zwei Objekte hinzugefügt werden: ein Würfel und eine Kugel mit den angegebenen Parametern. Zusätzlich zu den beiden oben genannten Elementen gibt es eine Reihe weiterer Grundelemente, die auf die gleiche Weise zur Szene hinzugefügt werden können:
<a-Circle>, <a-Cone>, <a-Cylinder>, <a-Dodecahedron>, <a-icosahedron> , <a-Oktaeder>, <a-Ebene>, <a-Ring>, <a-Tetraeder>, <a-Torusknoten>, <a-Torus>, <a-Treieck> . Auch in A-Frame gibt es eine Reihe anderer Elemente, die bestimmte Funktionen ausführen:
- <a-Kamera> - Erstellt eine Kamera. Derzeit wird nur die perspektivische Kamera (PerspectiveCamera) unterstützt.
- <a-obj-model>, <a-collada-model>, <a-gltf-model> - alle laden Modelle des entsprechenden Formats und zeigen sie an.
- <a-cursor> - Ein Element, mit dem Sie verschiedene Aktionen ausführen können: Klicken, Führen usw. Der Cursor ist an die Mitte der Kamera gebunden, sodass er sich immer in der Mitte dessen befindet, was der Benutzer sieht.
- <a-Bild> - Zeigt das ausgewählte Bild in einer Ebene (<a-Ebene>) an.
- <a-link> ist dasselbe wie ein Tag, nur für eine 3D-Szene.
- <a-sky> - ein riesiger Zylinder um die Bühne, mit dem Sie 360 Fotos anzeigen können. Oder Sie können es einfach mit etwas Farbe füllen.
- <a-sound> - Erstellt eine Schallquelle an einer bestimmten Position.
- <a-text> - zeichnet flachen Text.
- <a-video> - spielt Videos in einem Flugzeug ab.
Ich möchte auch darauf hinweisen, dass wir mit DOM-Elementen arbeiten und daher die Standard-DOM-API verwenden können, einschließlich querySelector, getElementById, appendChild usw.
A-Frame verwendet ECS
ECS (Entity Component System) - Anwendungs- und Spieldesignmuster. Es war nur im zweiten Segment weit verbreitet. Wie der Name schon sagt, sind die drei Grundkonzepte eines Musters Entität, Komponente, System. In der klassischen Form sind sie wie folgt miteinander verbunden: Wir haben ein Containerobjekt (Entity), zu dem wir Komponenten hinzufügen können. In der Regel ist eine Komponente für einen separaten Teil der Logik verantwortlich. Zum Beispiel haben wir ein Player-Objekt, es hat eine Health-Komponente. Diese Komponente enthält die gesamte Logik, die mit dem Auffüllen oder dem Verlust der Gesundheit des Spielers (Objekts) verbunden ist. Und Systeme werden wiederum benötigt, um eine Reihe von Entitäten zu verwalten, die von einigen Komponenten kombiniert werden. In der Regel kann eine Komponente eine Entität im gleichnamigen System registrieren.
In A-Frame wird dieses Muster sehr einfach und elegant implementiert - mithilfe von Attributen. Alle A-Frame-Elemente -
<a-scene>, <a-box>, <a-sphere> usw. - werden als Entitäten verwendet. Natürlich unterscheidet sich das
<a-entity> -Element. Sein Name spricht für sich. Alle anderen Elemente sind im Wesentlichen Wrapper für Komponenten und dienen der Vereinfachung, da jedes Element auch mit
<a-entity> erstellt werden kann . Zum Beispiel
<a-box> :
<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"></a-entity>
Geometrie - In diesem Fall ist dies die Komponente, die der
Entität <a-entity> hinzugefügt wurde.
<a-entity> selbst hat keine Logik (im globalen Sinne), und die
Geometriekomponente verwandelt sie im Wesentlichen in einen Würfel oder etwas anderes. Eine weitere Komponente, die nicht weniger wichtig als die
Geometrie ist
, ist das
Material . Es fügt der Geometrie Material hinzu. Das Material ist dafür verantwortlich, ob unser Würfel wie Metall glänzt, ob er Texturen hat usw. In reinen
Three.js müssten wir separate Geometrie und separates Material erstellen, und dann müsste all dies im Cache kombiniert werden. Im Allgemeinen spart dieser Ansatz Zeit.
Jede Komponente in A-Frame muss global durch ein spezielles Design registriert werden:
AFRAME.registerComponent('hello-world', { init: function () { console.log('Hello, World!'); } });
Dann kann diese Komponente der Szene oder einem anderen Element hinzugefügt werden.
<a-entity hello-world></a-entity>
Da wir den
Init- Rückruf für unsere Komponente hinzugefügt haben, funktioniert dieser Rückruf, sobald das Element zum DOM hinzugefügt wird, und wir sehen unsere Nachricht in der Konsole. Es gibt andere Lebenszyklus-Rückrufe in A-Frame-Komponenten. Lassen Sie uns näher darauf eingehen:
- update - wird sowohl während der Initialisierung als init als auch beim Aktualisieren einer Eigenschaft dieser Komponente aufgerufen.
- remove - Wird aufgerufen, nachdem eine Komponente oder Entität entfernt wurde, die sie enthält. Wenn Sie also <a-entity> aus dem DOM entfernen, rufen alle seine Komponenten remove callback auf.
- Häkchen - wird jedes Mal aufgerufen, bevor die Szene gerendert wird. In der Render-Schleife wird requestAnimaitonFrame verwendet
- tock - wird jedes Mal nach dem Rendern einer Szene aufgerufen.
- Wiedergabe - Jede wird aufgerufen, wenn das Rendern der Szene fortgesetzt wird. Im Wesentlichen nach scene.play ();
- Pause - Wird jedes Mal aufgerufen, wenn eine Szene nicht mehr gerendert wird. Im Wesentlichen nach scene.pause ();
- updateSchema - wird jedes Mal nach dem Aktualisieren des Schemas aufgerufen.
Ein weiteres wichtiges Komponentenkonzept in A-Frame ist die Schaltung. Das Diagramm beschreibt die Eigenschaften der Komponente. Es ist wie folgt definiert:
AFRAME.registerComponent('my-component', { schema: { arrayProperty: {type: 'array', default: []}, integerProperty: {type: 'int', default: 5} } }
In diesem Fall enthält unsere
my-Komponente zwei Eigenschaften,
arrayProperty und
integerProperty . Um sie an die Komponente zu übergeben, müssen Sie den Wert des entsprechenden Attributs festlegen.
<a-entity my-component="arrayProperty: 1,2,3; integerProperty: 7"></a-entity>
Sie können diese Eigenschaften innerhalb der Komponente über die
Dateneigenschaft abrufen.
AFRAME.registerComponent('my-component', { schema: { arrayProperty: {type: 'array', default: []}, integerProperty: {type: 'int', default: 5} }, init: function () { console.log(this.data); } }
Um die Eigenschaften einer Komponente von der Entität
abzurufen , zu der sie hinzugefügt wurde, können Sie die leicht geänderte Funktion
getAttribute verwenden. Beim Zugriff auf die A-Frame-Entität wird nicht nur der Zeichenfolgenwert des Attributs, sondern auch das oben erwähnte
Datenobjekt zurückgegeben .
console.log(this.el.getAttribute('my-component'));
Auf ungefähr die gleiche Weise können Sie die Eigenschaften einer Komponente ändern:
this.el.setAttribute('my-component',{arrayProperty: [], integerProperty: 5})
Lassen Sie uns nun über Systeme sprechen. Systeme in A-Frame werden wie Komponenten registriert:
AFRAME.registerSystem('my-system', { schema: {}, init: function () { console.log('Hello, System!'); }, });
Neben der Komponente verfügt das System über eine Schaltung und Rückrufe. Nur das System hat nur 5 davon:
init, play, pause, tick, tock . Das System muss der Entität nicht als Komponente hinzugefügt werden. Es wird automatisch zur Szene hinzugefügt.
this.el.sceneEl.systems['my-system'];
Wenn die Komponente denselben Namen wie das System hat, ist das System unter
this.system verfügbar.
AFRAME.registerSystem('enemy', { schema: {}, init: function () {}, }); AFRAME.registerComponent('enemy', { schema: {}, init: function () { const enemySystem = this.system; }, });
In der Regel werden Systeme benötigt, um Entitäten mit verwandten Komponenten zusammenzustellen und zu verwalten. Hier sollte es theoretisch eine Logik geben, die sich auf eine Sammlung von Entitäten bezieht. Kontrollieren Sie beispielsweise das Erscheinungsbild von Feinden im Spiel.
Die Kommunikation in A-Frame erfolgt über Browserereignisse
In der Tat, warum das Rad neu erfinden, wenn es im Moment eine großartige integrierte Publisher-Subscriber-Implementierung für DOM-Elemente gibt. Mit DOM-Ereignissen können Sie beide Browserereignisse abhören, z. B. einen Tastendruck, einen Mausklick und andere Benutzerereignisse. A-Frame bietet uns eine bequeme und einfache Möglichkeit, über Benutzerereignisse zwischen Entitäten, Komponenten und Systemen zu kommunizieren. Dazu wird jedes A-Frame-Element von der
Emit- Funktion gepatcht, es werden drei Parameter benötigt: Der
erste ist der Name des Ereignisses, der
zweite sind die zu übertragenden Daten, der
dritte ist, ob das Ereignis angezeigt werden soll.
this.el.emit('start-game', {level: 1}, false);
Mit
addEventListener können Sie dieses Ereignis auf die für uns alle übliche Weise
abonnieren: const someEntity = document.getElementById('someEntity'); someEntity.addEventListener('start-game', () => {...});
Das Sprudeln von Ereignissen ist hier ein sehr wichtiger Punkt, da sich manchmal zwei Entitäten, die miteinander kommunizieren müssen, auf derselben Ebene befinden. In diesem Fall können Sie dem Szenenelement einen Ereignis-Listener hinzufügen. Wie Sie bereits sehen können, ist es in jedem Element über den Link
sceneEl verfügbar.
this.el.sceneEl.addEventListener('start-game', () => {...});
Abschließend
Das ist vielleicht alles, worüber ich in diesem Artikel sprechen wollte. A-Frame hat viele verschiedene Themen, die behandelt werden könnten, aber dieser Artikel ist eine Rezension und ich wollte den Leser nur auf die Hauptpunkte konzentrieren.
Im nächsten Artikel werden wir versuchen, eine grundlegende Szene zu erstellen, um alle in der Praxis gewonnenen Kenntnisse zu testen. Danke an alle!