How-To

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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.