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

Um den dynamischen Aspekt voll auszunutzen, lässt sich die Anfrage an die API so anpassen, dass sie nur einen bestimmten Bereich – im Beispiel jeweils zehn GIFs – der Suchergebnisse lädt. Hierzu führen Entwickler die Variablen numItems und page ein und integrieren sie in die Funktion fetch.

var numItems = 10, page = 1;
 [...] fetch(‚...+'&limit='+numItems+'&offset='+(page*numItems)) [...]

Für das Ändern der Variable page und das erneute Aufrufen der Methode refresh erstellen Developer eine weitere Komponente a-refresh und binden sie innerhalb der <a-scene> ein. Da die Anwendung die VR-Szene komplett in WebGL rendert, müssen Webworker zusätzlich die Komponente cursor einbauen. Sie nimmt Klick-Events von unterschiedlichen Geräten auf und gibt sie an Javascript weiter. Klickt der Anwender nun über ein Eingabegerät – eine Maus, einen Touch-Screen oder einen Motion-Controller – auf die Box, stellt die App automatisch eine neue Anfrage an die API. Die beiden Frameworks A-Frame und Vue.js kümmern sich dann um den Umbau der Elemente im virtuellen Raum.

Vue.component('a-refresh‘, {
  template: '<a-box @click=“handleClick“></a-box>,
  methods: { handleClick: function(event) { page++;
scene.refresh(); }
}})
...
<a-refresh></a-refresh>
<a-camera><a-entity cursor [...]></a-camera>

Auf dem verlinkten GitHub-Repository gibt es den kompletten Source-Code zu diesem vereinfachten Beispiel, inklusive einer erweiterten Variante und zusätzlichen Kommentaren. Eine tolle Plattform mit vielen weiteren Beispielen zu A-Frame ist Glitch. Das Projekt „Awesome A-Frame bietet viele Links zu weiteren Materialien.

Fazit

WebVR steht mit einem starken Toolset und einer hilfsbereiten Community in den Startlöchern. Durch dessen Integration in führende Browser wächst die Zahl potenzieller Nutzer für Virtual -Reality-Inhalte im Web stetig. Das spiegelt sich auch in der langsam zunehmenden Nachfrage von Kunden an Agenturen und Freelancer für VR-Anwendungen wider. In Verbindung mit Frameworks wie Vue.js sind zudem auch komplexere VR- Anwendungen in Verbindung mit Web-Technologien möglich. Webentwickler können daher bekannte Techniken nutzen und müssen sich nicht in Gaming-Engines wie Unity einarbeiten.

Startseite
  • Seite:
  • 1
  • 2
  • 3
  • 4

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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

Jetzt anmelden