A-Frame (Framework)

A-Frame
[[Datei:|150px]]
Basisdaten
Hauptentwickler	Diego Marcos, Don McCurdy, Kevin Ngo
Entwickler
Erscheinungsjahr	2015-12
Aktuelle Version	1.5.0 (14. November 2023)
Aktuelle Vorabversion	()
Betriebssystem	Plattformunabhängigkeit
Programmier­sprache	JavaScript
Kategorie	JavaScript-Framework
Lizenz
aframe.io

A-Frame ist ein Framework zur Darstellung von 3-D-Objekten und für virtuelle Realität im Webbrowser, das seit 2015<ref>Josh Carpenter: Introducing A-Frame v0.1.0. 16. Dezember 2015, abgerufen am 17. Mai 2017 (). </ref> von Mozilla als offene Software entwickelt wird.

Funktionsprinzip

A-Frame erlaubt die Schaffung dreidimensionaler Welten mittels einer deklarativen Sprache, die dem aus HTML und XML bekannten Entitäts-System folgt. Objekte werden durch Tags angegeben, ihre Eigenschaften wie Position und Farbe in Attributen.<ref>Entity-Component-System. Abgerufen am 17. Mai 2017 (). </ref> Neben den standardmäßig zur Verfügung stehenden Objekten besteht auch die Möglichkeit, eigene Komponenten zu erstellen oder aus anderen Quellen einzubinden.<ref>Entity-Component-System. Extensibility. Abgerufen am 17. Mai 2017 (). </ref>

A-Frame stellt die so definierten Objekte dann grafisch dar und ermöglicht es dem Benutzer, in der Szene zu navigieren. Im einfachsten Fall wird die Szene einfach am Bildschirm gerendert, über die WebVR-API kann aber in modernen Browsern auch ein Head-Mounted Display benutzt werden. Intern setzt A-Frame bei der Darstellung die Bibliothek Three.js ein.<ref>Introduction – A-Frame. Abgerufen am 17. Mai 2017 (). </ref>

Über Manipulationen des DOM kann die Szene auch nachträglich verändert werden.<ref>JavaScript, Events, DOM APIs. Abgerufen am 17. Mai 2017 (). </ref> Mit Bildwiederholraten von 90 fps können dabei flüssige Bewegungen dargestellt werden.<ref>FAQ. How is A-Frame’s performance? Abgerufen am 17. Mai 2017 (). </ref>

Beispiel

Datei:A-Frame Hello World example.png

Beispielszene mit beschrifteten Objekten

Das folgende einfache Beispiel erzeugt eine statische Szene, in der der Benutzer navigieren kann:<ref>Code, interaktive Darstellung</ref>

<syntaxhighlight lang="html"> <html>

 <head>
   <title>Hello, World!</title>
   <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
 </head>
 <body>
   <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>
 </body>

</html> </syntaxhighlight>

Im Kopf wird zunächst A-Frame eingebunden. Die Szene selbst besteht aus einem Quader, einer Kugel und einem Zylinder auf einer Ebene vor einem Hintergrund.

Anwendungen

A-Frame ist ein beliebtes Framework zum Arbeiten mit virtueller Realität, da es komplexe Schnittstellen wie WebGL und WebVR leicht zugänglich macht und die Einstiegshürde in die virtuelle Realität senkt.<ref>Herbert Braun: Mozilla gibt Starthilfe für virtuelle Realität im Browser. In: heise online. 18. Dezember 2015, abgerufen am 17. Mai 2017. </ref> Durch den einfachen Aufbau kann es im Prototyping eingesetzt werden, bietet aber auch die Grundlage für komplexe Anwendungen. Bei Programmierern ist A-Frame besonders wegen ihrer hilfsbereiten Community beliebt.<ref>Salva: A practitioner’s perspective on A-Frame: —Interview with Roland Dubois. In: Mozilla Hacks. 28. März 2017, abgerufen am 17. Mai 2017 (). </ref>

A-Frame wird in vielen Demo-Anwendungen von virtueller Realität im Browser eingesetzt, beispielsweise A-Painter,<ref>A-Painter. Abgerufen am 17. Mai 2017. </ref> das ebenfalls von Mozilla entwickelt wurde und das Erstellen und Teilen dreidimensionaler Kunstwerke im Internet erlaubt.

Außerhalb der Entwicklerszene erlangte A-Frame Bekanntheit unter anderem durch den Einsatz in Fear of the Sky (360 Syria), einer Dokumentation des Bürgerkriegs in Syrien durch Amnesty International,<ref>#360Syria 'virtual tour' website reveals devastation of Aleppo barrel bombing. Amnesty International UK, 11. März 2016, abgerufen am 17. Mai 2017 (). </ref> Mars: An Interactive Journey der Washington Post.<ref>Julia Beizer: VR for All. In: Developer Blog – The Washington Post. 11. März 2016, abgerufen am 17. Mai 2017 (). </ref> und Reisen in 360 von Travelhackers.<ref>Travelhackers 360 | The most immersive adventures. Archiviert vom Vorlage:IconExternal (nicht mehr online verfügbar) am 7. September 2018; abgerufen am 2. Februar 2018 ().  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/360.travelhackers.ch </ref>

Weblinks

• aframe.io
• Deutschsprachiges A-Frame-Tutorial

Einzelnachweise

<references />