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 3 / 4

Vue.component('a-gif', {
  props: ['data'],
  template: '<a-plane :width=“width“ :height=“height“:material=“material“></a-plane>‘,
  computed: {
   width: function() { return this.data.images.preview.width / 100; },
   height: function() { return this.data.images.preview.height / 100; },
   material: function() { return ‚src:url(‚ + this.data.images.preview.mp4 + ')'; }
  }
})

Die Beispielanwendung in diesem Artikel erzeugt einen einfachen virtuellen Raum im Web mit Katzenbilder-Rondell.

Nun fehlen der dynamischen VR-Anwendung nur noch die Daten. Die API von Giphy.com, die in diesem Beispiel Anwendung findet, ist kostenfrei. Den API-Key können Entwickler online erzeugen. In Kombination mit der Funktion fetch von Javascript entsteht im Handumdrehen eine Reihe toller Katzen-GIFs. Das Laden der API verpacken Entwickler in einer Methode refresh in der Vue-Instanz und rufen diese sofort auf, wenn der Vue-Lebenszyklus das Event created auslöst. Das magische Zusammenspiel von A-Frame und Vue beginnt, sobald Webworker das Ergebnis der API der Variable this.items zuweisen: Die Anwendung erzeugt die Elemente a-gif nun dynamisch und berechnet ihre Attribute entsprechend – schließlich sind die GIFs in der virtuellen Realität sichtbar.

methods: { refresh: function(event) {
  fetch('https://api.giphy.com/v1/gifs/search?-q=cats&api_key='+API_KEY)
  .then(function(response) { return response.json();
})
  .then(function(items) { this.items = items.data;}.bind(this)); } },
created: function() { this.refresh(); }

Jedoch müssen sich Entwickler noch um die Platzierung der Elemente im virtuellen Raum kümmern. In folgendem Beispiel sehen wir, wie hilfreich die Flexibilität von A-Frame ist und wie einfach es ist, externe Komponenten im eigenen Projekt zu verwenden.

Im Kopfbereich der HTML-Datei laden Entwickler nun zwei weitere JS-Dateien: die Komponenten layout und look-at. Die Layout-Komponente platziert die GIFs in einem Kreis um den Nutzer der WebVR-Anwendung herum. Dazu liegt das Element a-gif in einer a-entity – also einer Wrapper-Komponente von A-Frame – auf Augenhöhe positioniert. Die Attribute von layout beschreiben Form, Größe und Ausrichtung. Außerdem fügen Developer die Komponente look-at mit dem simplen Zusatz look-at=“[camera]an den GIF-Flächen an, sodass sie sich jederzeit zum Nutzer hin drehen und so aus jeder Perspektive sichtbar sind. Fertig ist das virtuelle GIF-Rondell mit dynamisch geladenen Daten.

<script src=“https://unpkg.com/aframe-layout-component“></script>
<script src=“https://unpkg.com/aframe-look-at-component“></
script>
...
<a-entity layout=“type: circle; radius: 7; plane: xz;“
position=“0 1 0“><a-gif ...></a-gif></a-entity>
...
Vue.component('a-gif', { ... template: '<a-plane ...
look-at=“[camera]“></a-plane>' })

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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

Jetzt anmelden