A-frame (framework)

from Wikipedia, the free encyclopedia
A-frame

A-Frame logo.png
Basic data

Maintainer Diego Marcos, Don McCurdy, Kevin Ngo
Publishing year 2015-12
Current  version 1.0.4
(2020-02-05)
operating system Platform independence
programming language JavaScript
category JavaScript framework
License MIT license
aframe.io

A-Frame is a framework for displaying 3-D objects and for virtual reality in the web browser that has been developed by Mozilla as open software since 2015 .

Working principle

A-Frame allows the creation of three-dimensional worlds using a declarative language that follows the entity system known from HTML and XML . Objects are indicated by tags , their properties such as position and color in attributes . In addition to the objects available as standard, you can also create your own components or integrate them from other sources.

A-Frame then graphically displays the objects defined in this way and enables the user to navigate the scene. In the simplest case, the scene is simply rendered on the screen, but a head-mounted display can also be used in modern browsers via the WebVR API . Internally, A-Frame uses the Three.js library for the display .

The scene can also be changed later by manipulating the DOM . Fluid movements can be displayed with frame rates of 90 fps.

example

Example scene with labeled objects

The following simple example creates a static scene that the user can navigate: 

<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>

A frame is first integrated in the head. The scene itself consists of a cuboid , a sphere and a cylinder on a plane in front of a background.

Applications

A-Frame is a popular framework for working with virtual reality because it makes complex interfaces such as WebGL and WebVR easily accessible and lowers the barriers to entry into virtual reality. Due to its simple structure, it can be used in prototyping , but also provides the basis for complex applications. A-Frame is particularly popular with programmers because of its helpful community.

A-Frame is used in many demo applications of virtual reality in the browser, for example A-Painter, which was also developed by Mozilla and allows the creation and sharing of three-dimensional works of art on the Internet.

A-Frame gained notoriety outside of the developer scene, among other things, through its use in Fear of the Sky (360 Syria) , a documentation of the civil war in Syria by Amnesty International , Mars: An Interactive Journey by the Washington Post . and Travel in 360 from Travelhackers.

Individual evidence

  1. ↑ github.com . (English, accessed June 2, 2020).
  2. ^ Josh Carpenter: Introducing A-Frame v0.1.0. December 16, 2015, accessed May 17, 2017 .
  3. ↑ Entity-Component-System. Retrieved May 17, 2017 (English).
  4. ↑ Entity-Component-System. Extensibility. Retrieved May 17, 2017 (English).
  5. ↑ Introduction - A-Frame. Retrieved May 17, 2017 (English).
  6. ↑ JavaScript, Events, DOM APIs. Retrieved May 17, 2017 (English).
  7. ↑ FAQ. How is A-Frame's performance? Retrieved May 17, 2017 (English).
  8. ↑ Code , interactive representation
  9. ↑ Herbert Braun: Mozilla gives jump start for virtual reality in the browser. In: heise online. December 18, 2015, accessed May 17, 2017 .
  10. ^ Salva: A practitioner's perspective on A-Frame: —Interview with Roland Dubois. In: Mozilla Hacks. March 28, 2017, accessed May 17, 2017 .
  11. ^ A-Painter. Retrieved May 17, 2017 .
  12. ↑ # 360Syria 'virtual tour' website reveals devastation of Aleppo barrel bombing. Amnesty International UK, March 11, 2016, accessed May 17, 2017 .
  13. ↑ Julia Beizer: VR for All. In: Developer Blog - The Washington Post. March 11, 2016, accessed May 17, 2017 .
  14. ↑ Travelhackers 360 | The most immersive adventures. Retrieved on February 2, 2018 (German).

Web links