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

(Bild: Shutterstock/ g-stockstudio)

Auch komplexe VR-Projekte sind im Web mittlerweile möglich. Zum Beispiel mit einer Kombination der beliebten Frameworks Vue.js und A-Frame. Eine Einführung.

Der 8. August 2017 war ein wichtiger Tag für den WebVR-Standard. An jenem Tag integrierte Mozilla in dem offiziellen Release 55 von Firefox die Technologie – ein wichtiger Schritt für Virtual Reality im Web. Einige mobile Browser hatten schon vorgelegt, unter anderem Samsung Internet für die Gear VR, der Oculus Browser und allen voran die mobile Variante des Chrome-Browsers. Weitere Browser und Betriebssysteme folgten.

Es ist aber auch die wachsende Zahl an Entwicklerwerkzeugen, die die Erstellung von VR-Anwendungen möglich machen. Libraries wie React VR, PlayCanvas, Primrose VR und A-Frame wachsen und gedeihen. Daneben entstehen Werkzeuge wie Blocks von Google zur Erstellung von 3D-Content sowie unzählige Erweiterungen für A-Frame – etwa für Multi-User-VR-Anwendungen mit Hilfe von Networked-Aframe.

Komplexere VR-Anwedungen im Web wie beispielsweise Shops benötigen einen entsprechenden technischen Unterbau. Die Kombination von Vue.js und A-Frame ist ein guter Startpunkt. (Screenshot: A-Frame)

A-Frame war eine der ersten und ist derzeit eine der meistgenutzten WebVR-Lösungen. Das liegt daran, dass A-Frame so einfach zugänglich ist und andere Libraries nahtlos integriert. Die wichtigsten Weiterentwicklungen des Werkzeugs sind der A-Frame Inspector, die A-Frame Registry (eine Sammlung der besten Komponenten) und die Motion-Capture-Komponente, die das Testen einer VR-App stark vereinfacht. Ganz neu ist außerdem die Link-Komponente. Mit ihr können Entwickler mehrere VR-Seiten verknüpfen – unter anderem durch Portale –, ohne dass Nutzer die VR-Erfahrung verlassen müssen: ein wichtiger Aspekt, denn die Verlinkung verschiedener Seiten macht das Web schließlich erst aus.

VUE.JS: Komplexität auflösen

In den vergangenen Jahren entstand in der 2D-Webentwicklung die Notwendigkeit für eine klare Struktur in datengetriebenen Anwendungen – im Gegensatz zur händischen DOM-Manipulation aus frühen jQuery-Zeiten. Sobald Webworker in der VR-Entwicklung fürs Web über den einfachen Prototypen hinaus wollen, werden diese Anforderungen auch hier schnell deutlich. Daher ist die nahtlose Kombination aus A-Frame und Vue.js oder ähnlichen Frameworks ein unbedingtes Muss für jedes größere Virtual-Reality-Projekt im Web: zum Beispiel für einen WebVR-Shop, der an ein CMS angebunden ist und Artikel dynamisch ausliest; oder für eine WebVR-Anwendung, die 3D-Diagramme auf Basis laufender Events live erzeugt; oder eine WebVR-App, die Daten aus Social-Media-Kanälen nutzt. Die Liste an Beispielen ließe sich fortsetzen.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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

Jetzt anmelden

Finde einen Job, den du liebst