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.