A-Frame (Framework)
| A-Frame
| |
|---|---|
| |
| Basisdaten
| |
| Hauptentwickler | Diego Marcos, Don McCurdy, Kevin Ngo |
| Erscheinungsjahr | 2015-12 |
| Aktuelle Version | 1.5.0 (2023-11-14) |
| 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 | |
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.
Funktionsprinzip
[Bearbeiten | Quelltext bearbeiten]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
[Bearbeiten | Quelltext bearbeiten]
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
[Bearbeiten | Quelltext bearbeiten]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]
Weblinks
[Bearbeiten | Quelltext bearbeiten]Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ registry.npmjs.com. In: npmjs. (abgerufen am 3. März 2023).
- ↑ github.com. (englisch, abgerufen am 2. Juni 2020).
- ↑ Josh Carpenter: Introducing A-Frame v0.1.0. 16. Dezember 2015, abgerufen am 17. Mai 2017 (englisch).
- ↑ Entity-Component-System. Abgerufen am 17. Mai 2017 (englisch).
- ↑ Entity-Component-System. Extensibility. Abgerufen am 17. Mai 2017 (englisch).
- ↑ Introduction – A-Frame. Abgerufen am 17. Mai 2017 (englisch).
- ↑ JavaScript, Events, DOM APIs. Abgerufen am 17. Mai 2017 (englisch).
- ↑ FAQ. How is A-Frame’s performance? Abgerufen am 17. Mai 2017 (englisch).
- ↑ Code, interaktive Darstellung
- ↑ Herbert Braun: Mozilla gibt Starthilfe für virtuelle Realität im Browser. In: heise online. 18. Dezember 2015, abgerufen am 17. Mai 2017.
- ↑ Salva: A practitioner’s perspective on A-Frame: —Interview with Roland Dubois. In: Mozilla Hacks. 28. März 2017, abgerufen am 17. Mai 2017 (englisch).
- ↑ A-Painter. Abgerufen am 17. Mai 2017.
- ↑ #360Syria 'virtual tour' website reveals devastation of Aleppo barrel bombing. Amnesty International UK, 11. März 2016, abgerufen am 17. Mai 2017 (englisch).
- ↑ Julia Beizer: VR for All. In: Developer Blog – The Washington Post. 11. März 2016, abgerufen am 17. Mai 2017 (englisch).
- ↑ Travelhackers 360 | The most immersive adventures. Archiviert vom (nicht mehr online verfügbar) am 7. September 2018; abgerufen am 2. Februar 2018 (deutsch). Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
