A-Frame (Framework)
Software
From Wikipedia, the free encyclopedia
A-Frame ist ein Framework zur Darstellung von 3-D-Objekten und für virtuelle Realität im Webbrowser, das seit 2015[3] von Mozilla als offene Software entwickelt wird.
| A-Frame | |
|---|---|
| |
| Basisdaten | |
| Hauptentwickler | Diego Marcos, Don McCurdy, Kevin Ngo |
| Erscheinungsjahr | 2015-12 |
| Aktuelle Version | 1.5.0 (14. November 2023) |
| Aktuelle Vorabversion | 0.2.0-rc1[1] (15. März 2016) |
| Betriebssystem | Plattformunabhängigkeit |
| Programmiersprache | JavaScript |
| Kategorie | JavaScript-Framework |
| Lizenz | MIT-Lizenz[2] |
| aframe.io | |
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.[4] Neben den standardmäßig zur Verfügung stehenden Objekten besteht auch die Möglichkeit, eigene Komponenten zu erstellen oder aus anderen Quellen einzubinden.[5]
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.[6]
Über Manipulationen des DOM kann die Szene auch nachträglich verändert werden.[7] Mit Bildwiederholraten von 90 fps können dabei flüssige Bewegungen dargestellt werden.[8]
Beispiel
Das folgende einfache Beispiel erzeugt eine statische Szene, in der der Benutzer navigieren kann:[9]
<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>
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.[10] 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.[11]
A-Frame wird in vielen Demo-Anwendungen von virtueller Realität im Browser eingesetzt, beispielsweise A-Painter,[12] 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,[13] Mars: An Interactive Journey der Washington Post.[14] und Reisen in 360 von Travelhackers.[15]
