Schneller Einstieg in die WebVR Entwicklung mit A-Frame

A-Frame ist wie eine große Box mit Legosteinen für das VR Internet.

Das Framework macht die Entwicklung von VR Erlebnissen super einfach, ist gleichzeitig aber ausbaufähig und somit nicht nur für Einsteiger*innen interessant, sondern auch für Profis ein praktisches Werkzeug.

Wenn du noch nie von A-Frame gehört hast, empfehle ich dir kurz die Einführung zu lesen, sodass du einen guten Überblick dazu hast.

WebVR mit A-Frame: Einführung & Grundlagen

Voraussetzungen

A-Frame setzt die Voraussetzungen zur VR-Entwicklung sehr tief, jedoch solltest du die Grundlagen von HTML schon kennen und verstehen.

Abgesehen davon brauchst du aber keine tiefer gehenden Kenntnisse im Programmieren und kannst direkt loslegen!

Die „Installation“ ist super simpel: Du musst lediglich das JavaScript Framework – kompakt in einer JavaScript Datei – im HEAD deiner HTML Datei einbinden. Mehr nicht.

Und schon kannst du A-Frame verwenden. Deine 3D Szene baust du mit HTML Elementen auf, die ineinander verschachtelt sind und denen du Parameter gibst, die ähnlich wie CSS aufgebaut sind.

Deine erste VR Szene

Lass uns als Beispiel mal zwei Objekte im 3D Raum positionieren. Als erstes benötigen wir eine a-scene, die dann die beiden Objekte beinhaltet. Bei den bereitgestellten Objekten a-sphere und a-cube kannst du zum Beispiel die Position, Größe und Farbe anpassen.

Wenn du nun deine HTML Datei in einem Browser öffnest, siehst du direkt die 3D Szene mit dem Würfel und der Kugel. Um die Szene in VR betrachten zu können, benötigst du entweder ein Smartphone mit Google Cardboard. Oder ein Oculus Rift DK2 und die passenden Browserversionen: Firefox mit Addon oder Chrome.

Die Unterstützung für weitere Geräte und VR Brillen wird in den kommenden Monaten noch erweitert werden. Auch wird es in Zukunft nicht mehr notwendig sein eine extra Browserversion zu installieren.

Der simple Code führt im Browser dann zu diesem Ergebnis:


Mächtiges Objekte-Komponenten System

In unserem ersten Beispiel hast du die Kugel und den Würfel mit verschiedenen Attributen verändert. Zum Beispiel hast du die Position der Objekte im 3D Raum über das entsprechende Attribute position festgelegt.

Ein großer Vorteil von A-Frame ist, dass diese Attribute nicht fest in die Objekte einprogrammiert sind. Sie sind eigenständige Komponenten, die du auf alle Objekte anwenden kannst.

Konkret heißt das, dass es eine Positions-Komponente gibt, die mit allen Objekten kompatibel ist. Das macht deine Arbeit sehr flexibel, denn so kannst du dir in Zukunft weitere Komponenten und Objekte von der Community nehmen und diese nach Belieben kombinieren.

Auch kannst du selbst Komponenten programmieren, die den Anforderungen deines Projekts entsprechen. Sollen zum Beispiel manche Objekte vibrieren? Dann programmierst du einfach eine Vibrieren-Komponente und wendest sie auf all die Objekte an, die vibrieren sollen.


Kameras & Lichter

Jede a-scene kommt mit einer Standard Kamera und Lichter, um den Einstieg einfacher zu machen. Du kannst aber auch eine eigene Kamera und Lichter setzen und den Standard überschreiben.

Für unsere Beispielszene können wir eine Kamera einfügen und positionieren:

Dann fügen wir noch drei Lichter mit verschiedenen Eigenschaften hinzu:

… und schon sieht unsere Szene ganz anders aus:

In der A-Frame Dokumentation kannst du lesen welche weiteren Attribute die Kameras und Lichter haben. Spiele doch mal mit den Parametern herum um zu sehen welchen Effekt sie haben.

Interaktivität

Die einfachste Form der Interaktion in A-Frame ist mit dem integrierten Cursor möglich. Vielleicht ist es dir aufgefallen, dass wir im vorherigen Code den Cursor ausgeblendet haben, indem wir cursor-visible auf false gesetzt haben. Um ihn zu aktivieren, kannst du das Attribut einfach löschen.

Nun können wir zum Beispiel mit a-mouseenter und a-mouseleave die Eigenschaften der Objekte ändern, sobald User mit dem Cursor darüber fahren. Um den Zusammenhang der Interaktivität und Objekte zu geben, können wir mit IDs arbeiten.

Der Würfel reagiert auf die eingerichteten Events mouseenter und mouseleave

Mithilfe dieses Prinzips – und vielen weiteren Events – kannst du verschiedenste interaktive VR Erlebnisse in wenigen Zeilen Code umsetzen.


Grundlagen für den Start: Vorlagen

Für erste kleine Tests kannst du die Vorlage auf CodePen verwenden. Dadurch brauchst du dich nicht mit dem Erstellen und Öffnen der HTML Datei lokal zu herumschlagen, sondern kannst direkt mit A-Frame loslegen.

Für den nächsten Schritt ist dann das A-Frame Boilerplate Projekt auf GitHub sehr praktisch. Hier ist alles auf dem aktuellen Stand richtig eingebunden, verknüpft und für dich vorbereitet. Auch die lokale Entwicklung wird beschrieben, falls du noch keinen Web-Server auf deinem Computer eingerichtet hast.

Weitere Komponenten und Objekte

Im Laufe dieses Schnelleinstiegs hast du verschiedene A-Frame Objekte kennengelernt. Diese sogenannten Primitives sind vereinfachte Objekte und neben den vorgestellten gibt es noch curvedimage, cylinder, image, model, plane, sky, video und videosphere.

Außerdem gibt es noch eine große Zahl von Komponenten. Diese sind teilweise in den Primitives schon verwendet. Aber da sie unabhängig von den Objekten programmiert wurden, kannst du sie wie du möchtest miteinander kombinieren.


Wie dieses flexible Objekt-Komponenten System im Detail funktioniert und wie du deine eigenen Komponenten programmieren kannst, erfährt du in den nächsten beiden Artikeln.

Mit einer kurzen Anmeldung beim Newsletter kannst du sicher gehen, die Veröffentlichung zukünftiger Artikel und Tutorials nicht zu verpassen!