Tutorial: Einführung in A-Frame

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.

Attribut Standardwert zugehörige Komponente
cursor-color #FFF
cursor-maxdistance 1000 cursor.maxDistance
cursor-offset 1
cursor-opacity 1
cursor-scale 1
far 10000 camera.far
fov 80 camera.fov
near 0.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.

Attribut Standardwert zugehörige Komponente
color gray material.color
depth 1.5 geometry.depth
height 1.5 geometry.height
metalness 0 material.metalness
opacity 1 material.opacity
roughness 0.5 material.roughness
shader standard material.shader
transparent true material.transparent
translate 0 0 0 geometry.translate
src None material.src
width 1.5 geometry.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.

Attribut Standardwert zugehörige Komponente
height 1 geometry.height
opacty 1 geometry.radius
radius 2 geometry.radius
segments-radial 48 geometry.segmentsRadial
src None material.src
theta-length 360 geometry.thetaLength
theta-start 0 geometry.thetaStart
transparent true material.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.

Attribut Standardwert zugehörige Komponente
color gray material.color
height 1.5 geometry.height
metalness 0.0 material.metalness
opacity 1.0 material.opacity
open-ended false geometry.openEnded
radius 0.75 geometry.radius
radius-bottom 0.75 geometry.radiusBottom
radius-top 0.75 geometry.radiusTop
roughness 0.5 material.roughness
segments-height 1 geometry.segmentsHeight
segments-radial 36 geometry.segmentsRadial
shader standard material.shader
side front material.side
src None material.src
theta-length 360 geometry.thetaLength
theta-start 0 geometry.thetaStart
transparent true material.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.

Attribut Standardwert zugehörige Komponente
height 1.75 geometry.height
opacity 1.0 material.opacity
src None material.src
width 1.75 geometry.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.

Attribut Standardwert zugehörige Komponente
angle 60 light.angle
color #fff light.color
decay 1 light.decay
distance 0.0 light.distance
exponent 10.0 light.exponent
ground-color #fff light.groundColor
intensity 1.0 light.intensity
type directional light.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.

Attribut Standardwert zugehörige Komponente
format collada loader.format
opacity 1.0 loader.opacity
src None loader.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.

Attribut Standardwert zugehörige Komponente
color gray material.color
height 1 geometry.height
metalness 0.0 material.metalness
opacity 1.0 material.opacity
roughness 0.5 material.roughness
shader standard material.shader
src None material.src
translate None geometry.translate
transparent None geometry.transparent
width 1 material.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.

Attribut Standardwert zugehörige Komponente
color white material.color
radius 5000 geometry.radius
segments-height 64 geometry.segmentsHeight
segments-width 64 geometry.segmentsWidth
src None material.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.

Attribut Standardwert zugehörige Komponente
color gray material.color
metalness 0.0 material.metalness
opacity 1.0 material.opacity
radius 0.85 geometry.radius
roughness 0.5 material.roughness
segments-height 18 geometry.segmentsHeight
segments-width 36 geometry.segmentsWidth
shader standard material.shader
src None material.src
translate 0 0 0 geometry.translate
transparent true material.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.

Attribut Standardwert zugehörige Komponente
autoplay true <video>.autoplay
crossOrigin anonymous <video>.crossOrigin
height 1.75 geometry.height
loop true <video>.loop
src None material.src
translate 0 0 0 geometry.translate
width 3 geometry.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.

Attribut Standardwert zugehörige Komponente
autoplay true <video>.autoplay
crossOrigin anonymous <video>.crossOrigin
height anonymous geometry.height
loop true <video>.loop
radius 5000 geometry.radius
src None material.src
translate 0 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 Beschreibung Standardwert
far 10000
fov Blickwinkel 80
near 0.5

Cursor

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

Just test table
Eigenschaft Beschreibung Standardwert
fuse Legt fest ob ein Klick-Ereignis ausgelöst werden soll oder nicht false
maxDistance Maximale Entfernung um ein Objekt zu kontrollieren 5
timeout Dauer bis ein Klick-Ereignis ausgelöst wird 1500

 

<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>
Eigenschaft Beschreibung Standardwert
type Legt fest ob ein Objekt bei größerer Entfernung exponential oder linear „vernebelt“ linear
color Farbe der „Vernebelung“ #000
near ab wann ein Objekt anfängt im Nebel zu verschwinden 1
far bis zu welcher Entfernung ein Objekt vernebelt wird 1000
density Legt fest wie schnell der Nebel dicht wird 0.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
radius Radius 1
segments Anzahl der Segmente 8
thetaStart Falls 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
thetaLength Bezug nehmend auf den Wert davor gibt man an wo das Vieleck aufhören soll 360

 

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
radius Radius 1
height Höhe 2
segmentsRadial Anzahl der Segmente der Grundfläche – viele Segmente meinen einen Kreis 36
segmentsHeight 18
openEnded legt fest ob der Zylinder ein Ende hat false
thetaStart Startpunkt um gewellte Flächen zu erzeugen 0
thetaLength Endpunkt um gewellte Flächen zu erzeugen 360

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

Eigenschaft Beschreibung Standardwert
radius Radius 1
radiusTubular Radius des Rohres 0.2
segmentsRadial 36
segmentsTubular 0
arc 360

 

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:

Eigenschaft Beschreibung Standardwert
type Grundart directional
color Farbe #fff
intensity (directional+hemisphere+point+spot) Lichtstärke 1.0
groundColor (hemisphere) Hintergrundbeleuchtung #fff
decay (point+spot) Dimmung 1.0
distance (point+spot) Entfernung ab wann das Licht nicht mehr dimmt 0.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
height 360
metalness 0.5
opacity 1.0
reflectivity 1.0
repeat 1 1
roughness 0.5
transparent false
shader standard
side front
src None
width 640
envMap None

 

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.

Eigenschaft Standardwert
autoplay false
on click
loop false
volume 1

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.

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Deinen Besuch stimmst Du dem zu.