Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 49

Virtual-Reality-Projekte erstellen: So geht’s mit Vue.js und A-Frame

Seite 2 / 4

Dabei ist Vue.js nicht ohne Grund beliebt: Es ist schlank und vereint die besten Aspekte moderner Frontend-Frameworks. Es hilft bei einer saubereren Struktur der Elemente im HTML-DOM, der Interaktivität durch das Event-Handling und beim dynamischen Generieren von Inhalten – etwa durch Daten von APIs oder für Multi-User-Erfahrungen. Nicht zuletzt passen die beiden Frameworks ideal zusammen, da sie beide einen starken Schwerpunkt auf die Komposition von Komponenten legen. Einen guten Einstieg in das Framework bietet die offizielle Website.

Praxi-Demo: API-Getriebene Webvr-Anwendung

Der Grundaufbau eines WebVR-Projekts mit A-Frame ist einfach: Entwickler laden das Framework in ihre HTML-Datei, initialisieren eine neue VR-Szene mit Hilfe des HTML-Elements a-scene und laden die Vue.js-Datei hinzu. A-Frame kümmert sich automatisch um alle relevanten Details der Konfiguration und Kompatibilität mit dem Anwendergerät – egal ob VR-Brille, Smartphone oder regulärer Browser.

<html>
  <head>
   <script src=“https://unpkg.com/vue“></script>
   <script src=“https://unpkg.com/aframe“></script>
  </head>
  <body>
      <a-scene id=“scene“></a-scene>
  </body>
</html>

Das Szene-Element hat eine ID erhalten, sodass es sich in Javascript referenzieren lässt. Die Initialisierung von Vue ist ähnlich simpel: Entwickler erstellen eine neue Vue-Instanz und übergeben dabei die eben erwähnte ID und ein vorerst leeres Array, das seine Daten später über die API von Giphy.com erhält.

<script type=“text/javascript“>
  var scene = new Vue({ el: '#scene', data: { items:
[] } })
</script>

Nun geht es an den spannenden Teil: Aus der Komponente a-gif, die im nächsten Schritt entsteht, erzeugen Webworker dynamisch Elemente innerhalb der VR-Szene und binden diese mit Hilfe von v-for an das Array items der Vue-Instanz. Mit dieser Verbindung sorgt Vue.js ganz automatisch für die Manipulation der DOM-Elemente, je nachdem, wie Developer das Array verändern und beispielsweise neue Daten von der API einladen.

<a-scene id=“scene“><a-gif v-for=“item in items“ :data=“

item“ :key=“item.id“></a-gif></a-scene>

Durch das Entkoppeln der Komponente a-gif erhalten Entwickler eine saubere Struktur und können im kleinen Rahmen die Anforderungen des Elements definieren. Außerdem garantiert die Trennung eine hohe Wiederverwendbarkeit und einen guten Überblick bei komplexen Projekten. Das Template in diesem Beispiel nutzt das Objekt a-plane aus der Grundausstattung von A-Frame. Es erhält die dynamisch berechneten Attribute für die Breite, Höhe und das Material. Diese drei Werte ziehen Webworker aus den Daten, die sie von der Giphy-API erhalten, und formatieren sie für diese Szene etwas um – als Material für die Fläche a-plane kommt das GIF selbst im MP4-Format zum Einsatz.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden