Tutorial: Einführung in A-Frame

Wir von VRketing sind uns ziemlich sicher, dass Virtuelle Realitäten in absehbarer Zeit das World Wide Web erobern werden. VR-Kompatibilität einer Website wird sich als Standard in Zukunft genauso durchsetzen, wie heute responsives Webdesign. Bis es soweit ist, bedarf es jedoch noch jede Menge Entwickler- und Aufklärungsarbeit.

Mozilla hat ein eigenes  VR Team, dessen Aufgabe es ist, die Forschung voranzutreiben und zu verbreiten. Das VR Team hat hierfür ein Open-Source Framework für die Erstellung von 3D-Inhalten in Webbrowsern ins Leben gerufen.

Das A-Frame ist mit allen gängigen VR-Brillen kompatibel und kann auch in sämtlichen Standardbrowsern und mobilen Endgeräten verwendet werden. Das Framework ermöglicht in seiner Grundform bereits interaktive Erlebnisse und ist leicht erlern- und erweiterbar. Man benötigt für den Anfang lediglich Grundkenntnisse in HTML.

Zum Ausprobieren der Grundlagen empfehlen wir die Nutzung von Codepen.

Inhaltsverzeichnis

  1. Einführung
  2. Objekte
  3. Beispiele
  4. Grundbausteine
    1. <a-camera>
    2. <a-cube>
    3. <a-curvedimage>
    4. <cylinder>
    5. <a-image>
    6. <a-light>
    7. <a-model>
    8. <a-plane>
    9. <a-sky>
    10. <a-sphere>
    11. <a-video>
    12. <a-videosphere>
  5. Verbindung mit Browsern und anderen Endgeräten
  6. Objekt-Komponenten-System
  7. Komponenten
    1. Kamera
    2. Cursor
    3. Fog
    4. Geometrie
    5. Licht
    6. Loader
    7. Material
    8. Position
    9. Rotation
    10. Scale
    11. Sound

1 Einführung

Um ein A-Frame in eine auf html basierenden Website zu implementieren muss ein entsprechendes JavaScript importiert werden.
Die Objekte werden dann innerhalb von A-Szene-Elementen platziert. Der Grundaufbau - mit dem Beispiel eine Würfels - sieht dann so aus:


<html>
<head>
<title>Grundaufbau A-Frame</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-cube></a-cube>
</a-scene>
</body>
</html>

2 Objekte

A-Frame beinhaltet eine Reihe von Grundbausteinen, wie Videos, Würfeln, Bildern und weiteren. An späterer Stelle im Tuturial gehen wir auf alle Grundbausteine ein.
Jeder Grundbaustein hat spezielle Attribute, wie Höhe und Tiefe. Komponenten beinhalten zum Beispiel die Geometrie oder die Steuerung. Jedes Element kann durch die Grund-Attribute (position, rotation, scale) in Bezug zueinander gesetzt werden.

Am Beispiel eines Würfels:

<a-cube position="0 0 0" rotation="180 45 90" scale="1 1 1"></a-cube>

Innerhalb des Koordinatensystem X Y Z bedeutet +X eine Einheit nach rechts, +Y eine Einheit nach links und +Z eine Einheit in Richtung der Standard-Kamera. Entfernungen werden in Metern beziffert, da es sich immer auf die Wahrnehmung mit einem VR fähigem Endgerät bezieht. Die Rotation wird normal in Grad angegeben.

Die Objekte Kamera und Licht sind standardmäßig in jeder Szene, egal, ob sie vorher integriert wurden. Die Grundeinstellungen der Kamera in Bezug auf die Position sind 0 1.8 4. Die Grundeinstellungen für das Licht für die Position sind -1 2 1 mit einer Intensität von 0,2. Wenn man selbst ein eigenes Kamera- oder Licht-Objekt integriert, werden die Standardeinstellungen automatisch überschrieben. Weitere Anpassungsmöglichkeiten sind unter den Objekt-Unterpunkten zu finden: Kamera, Licht.

3 Beispiele

Beispiele für A-Frames finden Sie hier und hier. An einer kommerziellen A-Frame Seite wird aktuell von unseren Entwicklern gearbeitet - bekannt ist uns bisher keine.

4 Grundbausteine

Die Grundbausteine sind eine Hand voll Basiselemente, die häufig benötigt werden. Um die volle Bandbreite des A-Frames nutzen zu können, lesen Sie sich die Funktionsweise des Objekt-Komponenten-Systems durch. Alle Grundelemente können auch in Objekt-Komponenten-Schreibweise umgeschrieben werden. Ein roter Würfel mit Kantenlänge 3 Meter könnte so erzeugt werden:

<a-cube width="3" color="red"></a-cube>

oder in Objekt-Komponenten-Schreibweise:

<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>

Mit Grundbausteinen können Entwickler sofort mit VR-Websites starten ohne sich tiefer mit der Flexibilität des A-Frames auseinanderzusetzen zu müssen.

Grundbausteine und Objekt-Komponenten können gleichzeitig innerhalb einer A-Szene genutzt werden.

4.1 <a-camera>

Der A-Camera-Baustein ist, wie oben schon beschrieben, standardmäßig in jeder Szene implementiert ohne, dass er extra gesetzt werden muss. Mit diesem Baustein habe ich großen Einfluss auf die Ansicht und die Bedienung. In der nachfolgenden Tabelle sind alle mögliche Einflussgrößen (Attribute) aufgeschlüsselt. Auf die dazugehörigen Komponenten wird später näher eingegangen.

AttributStandardwertzugehörige Komponente
cursor-color#FFF
cursor-maxdistance1000 cursor.maxDistance
cursor-offset1
cursor-opacity1
cursor-scale1
far10000camera.far
fov 80 camera.fov
near0.5 camera.near

(Quelle: https://aframe.io/docs/primitives/a-camera.html)

<a-camera cursor-visible="true" position="1 2 3"></a-camera>

4.2 <a-cube>

Das A-Cube-Element setzt einen einfachen Würfel in das Frame.

AttributStandardwertzugehörige Komponente
colorgraymaterial.color
depth1.5geometry.depth
height1.5geometry.height
metalness0material.metalness
opacity1material.opacity
roughness0.5material.roughness
shaderstandardmaterial.shader
transparenttruematerial.transparent
translate0 0 0geometry.translate
srcNonematerial.src
width1.5geometry.width

(Quelle: https://aframe.io/docs/primitives/a-cube.html)

<a-cube rotation="45 90 45" width="2" depth="2" height="2"></a-cube>

4.3 <a-curvedimage>

Mit diesem Element können gekrümmte Bilder eingefügt werden. Das kann sinnvoll sein, wenn sich der Nutzer in einer Art rundem Raum befinden soll. Aktuell ist hier allerdings darauf zu achten in welchem Format das Bild abgebildet werden soll, damit keine Verzerrungen entstehen. In zukünftigen Updates wird die Verwendung also noch vereinfacht aber mit ein wenig Geduld ist die Verwendung jetzt schon sehr praktisch.

AttributStandardwertzugehörige Komponente
height1geometry.height
opacty1geometry.radius
radius2geometry.radius
segments-radial48geometry.segmentsRadial
srcNonematerial.src
theta-length360geometry.thetaLength
theta-start0geometry.thetaStart
transparenttruematerial.transparent

(Quelle: https://aframe.io/docs/primitives/a-curvedimage.html)

<a-curvedimage src="/images/logojpg" radius="2" theta-length="60" height="70" rotation="10 120 10" scale="1 1 1"></a-curvedimage>

4.4 <a-cylinder>

Mit dem A-Cylinder Element kann jede Art von Zylinder erzeugt werden. Durch die Attribute radius-bottom und radius-top sind auch Kegel-Formen möglich.

AttributStandardwertzugehörige Komponente
colorgraymaterial.color
height1.5geometry.height
metalness0.0material.metalness
opacity1.0material.opacity
open-endedfalsegeometry.openEnded
radius0.75geometry.radius
radius-bottom0.75geometry.radiusBottom
radius-top0.75geometry.radiusTop
roughness0.5material.roughness
segments-height1geometry.segmentsHeight
segments-radial36geometry.segmentsRadial
shaderstandardmaterial.shader
sidefrontmaterial.side
srcNonematerial.src
theta-length360geometry.thetaLength
theta-start0geometry.thetaStart
transparenttruematerial.transparent

(Quelle: https://aframe.io/docs/primitives/a-cylinder.html)

<a-cylinder position="3 0 2" rotation="-90 20 30" height="3" open-ended="true" color="red"></a-cylinder>

4.5 <a-image>

Mit dem Image-Baustein können, wie mit dem CurvedImage-Baustein Bilder in eine A-Frame-Szene implementiert werden. Auch hier muss bei der aktuellen Version noch auf die Maße geachtet werden, um Verzerrungen zu vermeiden. Ebenfalls schwierig gestaltet sich gegenwärtig noch das Überlappen von Bildern.

AttributStandardwertzugehörige Komponente
height1.75geometry.height
opacity1.0material.opacity
srcNonematerial.src
width1.75geometry.width

(Quelle: https://aframe.io/docs/primitives/a-image.html)

<a-image src="haus.png" width="350" height="200"></a-image>

4.6 <a-light>

Licht ist, wie die Kamera, ein Grundbaustein, der immer gesetzt wird - egal ob er im Quellcode berücksichtigt wird oder nicht. Die Standardwerte werden entsprechend überschrieben, wenn man als Entwickler selbst ein Licht einfügt.

AttributStandardwertzugehörige Komponente
angle60light.angle
color#ffflight.color
decay1light.decay
distance0.0light.distance
exponent10.0light.exponent
ground-color#ffflight.groundColor
intensity1.0light.intensity
typedirectionallight.type

(Quelle: https://aframe.io/docs/primitives/a-light.html)

<a-light color="green" position="4 4 4" type="hemisphere"></a-light>

4.7 <a-model>

In eine VR-Website mit A-Frame können 3D-Modelle eingefügt werden. OBJ- und DAE-Dateiformate werden durch den A-Model-Baustein geladen.

AttributStandardwertzugehörige Komponente
formatcolladaloader.format
opacity1.0loader.opacity
srcNoneloader.src

(Quelle: https://aframe.io/docs/primitives/a-model.html)

<a-model scale="4 4 4" src="/haus.dae"></a-model>

4.8 <a-plane>

Glatte Flächen werden mit dem A-Plane-Baustein eingesetzt.

AttributStandardwertzugehörige Komponente
colorgraymaterial.color
height1geometry.height
metalness0.0material.metalness
opacity1.0material.opacity
roughness0.5material.roughness
shaderstandardmaterial.shader
srcNonematerial.src
translateNonegeometry.translate
transparentNone geometry.transparent
width1material.width

(Quelle: https://aframe.io/docs/primitives/a-plane.html)

<a-plane rotation="45 90 25" height="35" color="blue"></a-plane>

4.9 <a-sky>

Dieser Baustein fügt einen Hintergrund in die A-Frame-Szene ein. Der Hintergrund kann einfarbig aber auch ein Bild sein. Bei Bildern ist jedoch zu beachten, dass nur kubische Panoramabilder Sinn ergeben.

AttributStandardwertzugehörige Komponente
colorwhitematerial.color
radius5000geometry.radius
segments-height64geometry.segmentsHeight
segments-width64geometry.segmentsWidth
srcNonematerial.src

(Quelle: https://aframe.io/docs/primitives/a-sky.html)

<a-sky src="haeuserfront.png"></a-sky>

4.10 <a-sphere>

Mit diesem Grundbaustein können Kugeln in die Szene eingefügt werden. Die Attribute und Komponenten, sind ähnlich denen eines Würfels.

AttributStandardwertzugehörige Komponente
colorgraymaterial.color
metalness0.0material.metalness
opacity1.0material.opacity
radius0.85geometry.radius
roughness0.5material.roughness
segments-height18geometry.segmentsHeight
segments-width36geometry.segmentsWidth
shaderstandardmaterial.shader
srcNonematerial.src
translate0 0 0geometry.translate
transparenttruematerial.transparent

(Quelle: https://aframe.io/docs/primitives/a-sphere.html)

<a-sphere color="green" radius="3.5"></a-sphere>

4.11 <a-video>

Mit diesem Grundbaustein können gewöhnliche Videos in die Szene eingefügt werden. Für 360 Grad Videos ist das nächste Element gedacht.

AttributStandardwertzugehörige Komponente
autoplaytrue<video>.autoplay
crossOriginanonymous<video>.crossOrigin
height1.75geometry.height
looptrue<video>.loop
srcNonematerial.src
translate0 0 0geometry.translate
width3geometry.width

(Quelle: https://aframe.io/docs/primitives/a-video.html)

<a-video src="image_video.mp4" width="20" height="10" position="1 1 -30"></a-video>

4.12 <a-videosphere>

Für das Einfügen von 360 Grad Videos gibt es den A-Videosphere-Baustein.

AttributStandardwertzugehörige Komponente
autoplaytrue<video>.autoplay
crossOriginanonymous<video>.crossOrigin
heightanonymousgeometry.height
looptrue<video>.loop
radius5000geometry.radius
srcNonematerial.src
translate0 0 0 geometry.translate

(Quelle: https://aframe.io/docs/primitives/a-videosphere.html)

<a-videosphere src="360_grad_image_video.mp4"><a-videosphere>

5 Verbindung mit Browsern und anderen Endgeräten

A-Frames funktionieren auf fast allen gängigen Endgeräten. Auf dem Smartphone wurde es bisher auf iOS und Android getestet. Man kann Virtual Reality Websites ganz normal im Browser laden, den VR Button drücken und dann das Handy in die VR-Brille reinlegen. Auf Desktop PCs können die VR Websites via klicken und ziehen betätigt werden. Die Bedienung ist generell sehr intuitiv.

6 Objekt-Komponenten-System

Das Objekt-Komponenten-System ist sehr flexibel und kann in überschaubare Bauteile aufgesplittet werden.

Objekte sind Instanzen innerhalb der A-Frame-Szene. Alle Grundbausteine sind zum Beispiel Objekte. Komponenten sind Eigenschaften, die den Objekten zugeordnet werden.

Eine Instanz hat in der Regel mehrere Komponenten. Ein Würfel ist ein Objekt und seine Farbe und Position sind beispielsweise Eigenschaften von dazugehörigen Komponenten. Die Komponenten werden noch unterteilt und gegliedert. Die Farbe wäre in dem Fall eine Eigenschaft der Material-Komponente.

Am Beispiel:

<a-entity geometry="primitive: box; depth: 3; height: 3; width: 3"
material="color: red"></a-entity>

Wir haben hier einen Kasten mit Geometrie- und Material-Komponenten. Die Geometrie-Komponente legt hier einen Quader als Ausgangsform zu Grunde und definiert Höhe, Tiefe und Breite.

Die Farbe wird durch die Material-Komponente color festgelegt. Wenn man an dieser Stelle ein bisschen ausprobiert, wird man feststellen, dass die Möglichkeiten vielfältig und dennoch einfach umzusetzen sind.

7 Komponenten

Im letzten Abschnitt des Grundlagen-Tutorials werden wir uns mit den einzelnen Komponenten des A-Frames auseinandersetzen.

Kamera

Die camera-Komponente beeinflusst den Blickwinkel und die Schärfe, die der Nutzer auf ein Objekt hat.

Eigenschaft BeschreibungStandardwert
far10000
fovBlickwinkel80
near0.5

Cursor

Die cursor-Komponente beeinflusst die Eigenschaften von Klicken innerhalb der Szene.

Just test table
EigenschaftBeschreibungStandardwert
fuseLegt fest ob ein Klick-Ereignis ausgelöst werden soll oder nichtfalse
maxDistanceMaximale Entfernung um ein Objekt zu kontrollieren5
timeoutDauer bis ein Klick-Ereignis ausgelöst wird1500
<a-entity cursor="fuse: true; maxDistance: 20; timeout: 100">
</a-entity>

Fog

Die fog-Komponente legt fest, inwieweit Objekt bei größerer Entfernung verschwimmen sollen oder nicht.

<a-scene fog="type: exponential; color: #111"></a-scene>
EigenschaftBeschreibungStandardwert
typeLegt fest ob ein Objekt bei größerer Entfernung exponential oder linear "vernebelt"linear
colorFarbe der "Vernebelung" #000
near ab wann ein Objekt anfängt im Nebel zu verschwinden1
farbis zu welcher Entfernung ein Objekt vernebelt wird1000
density Legt fest wie schnell der Nebel dicht wird0.00025

Geometrie

Die geometrie-Komponente ist sehr grundlegend für ein Objekt. Sie legt den Schatten die Größe und die Grundform fest. Folgende Grundformen können definiert werden:

Rechteck

Rechtecke werden mit dem box-Attribut erzeugt:

<a-entity geometry="primitive: box; width: 5; height: 5; depth: 5"></a-entity>

In unserem Beispiel wird ein Quader erzeugt, da die Seiten alle gleich lang sind, sogar ein Würfel mit der Kantenlänge 5 Meter.

Kreis

Vielecke können mit dem circle-Attribut erzeugt werden. Um einen Kreis zu erzeugen, nimmt man einfach ein Vieleck mit sehr vielen Ecken. Da der Standardwert für die Anzahl an Ecken 8 ist, wir durch folgenden Code ein 8-Eck mit einem Radius von 2 Metern erzeugt:

<a-entity geometry="primitive: circle; radius: 2"></a-entity>

Folgende Werte können zusätzlich noch bearbeitet werden:

Eigenschaft Beschreibung Standardwert
radiusRadius1
segmentsAnzahl der Segmente8
thetaStartFalls man nur einen Teil des Vielecks erzeugen will - zum Beispiel ein Viertel - gibt man mit diesem Wert an bei wie viel Grad es anfangen soll 0
thetaLengthBezug nehmend auf den Wert davor gibt man an wo das Vieleck aufhören soll360

Zylinder

Mit dem cylinder-Attribut können sowohl klassische Zylinder, als auch gebogene Oberflächen und Rohre erzeugt werden. Eine gebogene Oberfläche könnte zum Beispiel so erzeugt werden:

<a-entity geometry="primitive: cylinder; openEnded: true; thetaLength: 90"></a-entity>
Eigenschaft Standardwert
radiusRadius1
heightHöhe2
segmentsRadialAnzahl der Segmente der Grundfläche - viele Segmente meinen einen Kreis36
segmentsHeight18
openEndedlegt fest ob der Zylinder ein Ende hatfalse
thetaStartStartpunkt um gewellte Flächen zu erzeugen0
thetaLengthEndpunkt um gewellte Flächen zu erzeugen360

Kegel

Ein Kegel hat dieselben Eigenschaften, wie ein Zylinder und zwei weitere:

<a-entity geometry="primitive: cone; radiusBottom: 5; radiusTop: 1"></a-entity>

Die Standardwerte für radiusTop und radiusBottom sind jeweils 1.

Ebene

Ebenen können mit dem plane-Attribut erstellt werden. Seine Eigenschaften sind width und heigth und deren Standardwerte 2.

Ring

Ein Ring ist als flaches Vieleck ähnlich einer DVD zu verstehen mit einem Außen- und einem Innenring.

<a-entity geometry="primitive: ring; radiusInner: 0.7; radiusOuter: 2"></a-entity>

Kugel

Eine Kugel wird folgendermaßen erzeugt:

<a-entity geometry="primitive: sphere; radius: 2"></a-entity>

Torus

Ein Torus ist ein 3D-Ring. Hier ist ein Bild eines Torus:
Torus

EigenschaftBeschreibungStandardwert
radiusRadius1
radiusTubularRadius des Rohres0.2
segmentsRadial36
segmentsTubular0
arc360

Torusknoten

Ein Torusknoten ist eine Verflechtung mehrerer Torus-Körper. Zur besseren Vorstellung, was sich darunter verbirgt:

TorusKnot3D

Die einzelnen Torus-Körper lassen sich definieren, wie ein gewöhnlicher Torus. Die Verflechtung wird durch die Eigenschaften p und q bestimmt.

<a-entity geometry="primitive: torusKnot; p: 2; q:4"></a-entity>

Licht

Es gibt ein großes Spektrum von Licht, was für eine A-Frame-Szene genutzt werden kann.

Die Grundarten (type):

  • Umgebungslicht (ambient)
  • direktes Licht (directional)
  • Sonnenlicht (hemisphere)
  • punktuelles Licht (point)
  • Lichtspot (spot)

Je nachdem, welche Grundart von Licht man wählt, hat man unterschiedliche Eigenschaften zur Auswahl. Die gewählte Grundart ist deshalb in Klammern gesetzt:

EigenschaftBeschreibungStandardwert
typeGrundart directional
colorFarbe#fff
intensity (directional+hemisphere+point+spot)Lichtstärke1.0
groundColor (hemisphere)Hintergrundbeleuchtung#fff
decay (point+spot)Dimmung1.0
distance (point+spot)Entfernung ab wann das Licht nicht mehr dimmt0.0

Loader

Die loader-Komponente legt fest, welches 3D-Model geladen wird und was es für ein Dateiformat hat:

<a-entity loader="src: haus.obj; format: obj"></a-entity>

Material

Die material-Komponente definiert die Optik eines Objektes. Die Eigenschaften sind selbsterklärend, weshalb auf eine Beschreibung verzichtet wurde:

Eigenschaft Standardwert
color#fff
height360
metalness0.5
opacity1.0
reflectivity1.0
repeat1 1
roughness0.5
transparentfalse
shaderstandard
sidefront
srcNone
width640
envMapNone

Position

Die Position wird innerhalb eines Koordinatensystems festgelegt. Innerhalb des Koordinatensystem X Y Z bedeutet +X eine Einheit nach rechts, +Y eine Einheit nach links und +Z eine Einheit in Richtung der Standard-Kamera.

<a-entity position="-3 2 7"></a-entity>

Rotation

Die rotation-Komponente hat nur 3 Eigenschaften, nämlich die Neigung in Richtung der X-, Y- und der Z-Achse in Grad.

<a-entity rotation="30 60 120"></a-entity>

Scale

Die scale-Komponente gibt die Ausrichtung von einem fiktiven Mittelpunkt aus an. Die Achsenausrichtung ist wieder X,Y und Z.

<a-entity scale="3 4 12"></a-entity>

Sound

Durch die sound-Komponente können Objekten Töne und Lautstärken zugeordnet werden.

EigenschaftStandardwert
autoplayfalse
onclick
loopfalse
volume1

Wir hoffen, das Tutorial hat euch einen ersten Einblick in die Welt von Mozillas A-Frame gegeben. Wir begeistern uns schon länger für das Thema und sind gespannt auf die zukünftigen Entwicklungen in dem Bereich. Wenn Ihr Änderungs-Ideen für das Tutorial habt, schreibt uns doch bitte einfach an: info@vrketing.de.