Kommunikation zwischen A-Frame und JavaScript

In Verlauf dieser Artikelserie haben wir die große Flexibilität von A-Frame kennengelernt. Doch das Framework lebt nicht in einer eigenen kleinen Blase.

Die Interaktion mit anderen Bibliotheken und der konkreten Programmiersprache JavaScript ist von Anfang an geplant gewesen. Das erlaubt uns A-Frame in bestehende Projekte zu integrieren und auch in neuen Projekten im Zusammenhang mit anderen Systemen zu verwenden.

Das Objekt-Komponenten System von A-Frame bietet eine erste wichtige Grundlage für die Zusammenarbeit mit anderen Systemen: Das Framework basiert auf einer regulären HTML Syntax mit Elementen und Attributen.

Andere Frameworks können diese Elemente organisieren und Attribute anpassen. So kann zum Beispiel React verwendet werden um interaktive und dynamische VR Erlebnisse zu programmieren.

Wenn du A-Frame noch gar nicht kennst, empfehle ich dir die Artikelserie vom Begin an zu lesen – angefangen mit dieser Einführung:

WebVR mit A-Frame: Einführung & Grundlagen

Einen guten Einstieg in das angesprochene Komponenten System findest du hier:

Das Objekt-Komponenten System von A-Frame verstehen

Alles klar, dann lass uns mal tiefer in das Framework einsteigen!


HTML Syntax

Die Elemente von A-Frame mit ihren Attributen kannst du wie jedes klassische HTML Element über verschiedene Wege erstellen, modifizieren und entfernen.

Du kannst sie direkt in den HTML Code schreiben, die Syntax serverseitig generieren und ausgeben — z.B. in Ruby oder PHP — oder dynamisch mit JavaScript erstellen.

Soweit zum Erstellen einer statischen VR Szene. In der Regel wollen wir dem Benutzer aber auch die Möglichkeit geben mit der virtuellen Realität zu interagieren.

Hierfür bietet A-Frame selbst verschiedene Möglichkeiten an auf Events zu reagieren und die Szene und Attribute anzupassen bzw. Animationen abzuspielen. Aber was wenn wir komplexere Dinge tun wollen?

Kommunikation zwischen JS und Komponenten

Das ist nicht nur möglich, sondern von den Programmierer*innen von A-Frame im Kern angedacht und umfangreich unterstützt. Das heißt es gibt kein vorgegebenes System, keine abstrahierte Ebene mit der du arbeitet musst.

Nehmen wir uns ein Beispiel: Mit der Kombination verschiedener Komponenten transformieren wir das leere Objekt, das entity, in einen einfachen Fluss in der Szene.

<a-entity id="riverEntity"
          geometry="primitive: plane"
          material="color: blue"
          position="-10 0 0"
          sound="src: river.mp3; autoplay: true"></a-entity>

Unser Fluss hat eine Farbe, position und spielt einen Ton, die „river“ MP3 Datei, ab. Über die gesetzte id können wir nun in regulärem JavaScript auf das Objekt zugreifen – wie auch auf normale HTML Objekte.

Um die Syntax zu vereinfachen, nehmen wir uns noch jQuery dazu.

$(function() {
  var river = $('#riverEntity').get(0);
});

In der Variable entity steckt nun unser A-Frame Objekt. Wir können einer Liste der verschiedenen Komponenten – z.B. Material oder Position – folgendermaßen abfragen.

console.log(river.components);

// Object {
//   geometry,
//   material,
//   position,
//   sound
// }

Auch können wir die Attribute eines Objekts direkt auslesen und ändern. Dies geht über getAttribute und setAttribute. Diese beiden Funktionen – getter und setter – zu verwenden ist hilfreich, da sie das Schema (mehr dazu kannst du in diesem Artikel lesen) der Komponente mit berücksichtigen.

Das Lesen und Verändern der MP3 Datei unseres Flusses ist also ganz einfach möglich:

var src = river.components.sound.getAttribute('src')
console.log(src) // river.mp3

river.components.sound.setAttribute('src', 'stream.mp3');

Für komplexere Komponenten mit mehreren Attributen im Schema kannst du die Funktion setComponentAttribute (mit den Parametern component, attribute und value) verwenden um direkt ein einzelnes Attribut anzupassen.

Einfach aber mächtig

Diese beiden Grundlagen — die HTML Syntax und der Zugriff auf Komponenten — wirken auf den ersten Blick sehr simpel. Sie sind aber alles was du benötigst um A-Frame zusammen mit anderen Frameworks zu verwenden. Das ermöglicht dir die Umsetzung von komplexen und umfangreichen WebVR Projekten.

So kannst du zum Beispiel TweenJS verwenden um die Attribute einer Komponente zu animieren oder wie erwähnt mit React die Szene generieren und „On the fly“ bei Interaktionen verändern. Zu React hat Kevin Ngo eine schöne Einführung geschrieben.

Weitere Schritte

Damit wäre unsere erste Artikelserie zu A-Frame am Ende. Jedoch kannst du mich natürlich darüber hinaus jederzeit mit deinen Fragen kontaktieren.

Außerdem möchte ich dir nochmal die Liste im awesome-aframe GitHub Projekt ans Herz legen. Diese wächst stetig und es kommen immer mehr Artikel und Komponenten dazu, von denen du Neues lernen kannst.

Ich wünsche dir viel Erfolg bei deinen WebVR Projekten!