It’s #FrontendFriday – Virtual Reality im Browser mit A-Frame!

Hello VR-World!

Wusstet ihr schon dass VR auch im Browser möglich ist? Die Lösung lautet A-Frame!

1. Was ist A-Frame?

A-Frame ist ein Framework welches von Mozilla entwickelt wurde und auf der JavaScript-Bibliothek three.js basiert. Darin enthalten ist bereits eine API, welche die Kommunikation zwischen JavaScript und VR-Devices ermöglicht. Dadurch ist es möglich  VR-Elemente im Browser zu integrieren.

A-Frame lässt sich mit zahlreichen Frameworks und Bibliotheken kombinieren wie beispielsweise React, d3 oder Angular.

Mit A-Frame kann mit einem vergleichsweise geringem Implementierungsaufwand ein sehr großer WOW-Effekt hervorgerufen werden.

2. Was ist das besondere an A-Frame?

Der große Vorteil von A-Frame ist, dass hierfür keine separate Game-Engine wie Unity oder Unreal benötigt wird, um VR-Elemente zu entwickeln. Zudem muss keine separate Applikation erstellt werden, um VR-Elemente auszuführen und anzuzeigen. Mit Hilfe von A-Frame lassen sich VR-Elemente direkt im Browser implementieren. Mit einem passenden Device  muss der User lediglich die entsprechende Webseite aufrufen. Hier ist bereits ein Handy in Kombination mit einem Cardboard ausreichend.

Bildquelle: https://de.m.wikipedia.org/wiki/Datei:Assembled_Google_Cardboard_VR_mount.jpg

3. Integration von A-Frames in Angular (ein praktisches Beispiel)

Einen technische Integration in das Framework Angular kann in wenigen Schritten implementiert werden:

• Erstellung eines Angular Projekts mit ng new <projektname>
• Installation von A-Frame: npm install aframe –reg https://registry.npmjs.org
• Ergänzung in polyfill.ts durch: import ‚aframe‘;
• Erweiterung der app.module.ts: schemas: [CUSTOM_ELEMENTS_SCHEMA]
• Eigentliche Implementierung in app.component.html:

    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>

• Ausführung des Projekts mit npm start

Das Ergebnis sieht wie folgt aus:

Bildquelle: Eigene Darstellung

4. Welche Anwendungsmöglichkeiten gibt es?

Anwendungsmöglichkeiten gibt es nahezu in allen Branchen. Überall wo es etwas zu präsentieren gibt erregt eine VR-Implementierung die Aufmerksamkeit der Kunden. Dies kann ein 360°-Bild oder -Video sein oder einfach nur ein Modell in einem Raum. Zudem kann mit dem präsentierten Modell interagiert und dieses genauer betrachtet werden.

Die AG Webfrontend wünscht euch ein schönes Wochenende!

Quellen: