Edge Rewrite
// HTMLRewriter · presentation

This page was redesigned at the edge.

Cloudflare fetched the original article and streamed it through HTMLRewriter to apply an entirely new visual system without rebuilding the source page.

Jump to content

A-Frame (software)

From Wikipedia, the free encyclopedia
A-Frame
DevelopersDiego Marcos, Don McCurdy, Kevin Ngo
ReleaseDecember 2015; 10 years ago (2015-12)
Stable release
1.7.1 / April 1, 2025; 15 months ago (2025-04-01)[1]
Written inJavaScript
PlatformCross-platform
TypeJavaScript framework
LicenseMIT License
Websiteaframe.io
Repository

A-Frame is an open-source web framework, written in JavaScript, for building virtual reality (VR) experiences.[2] It is maintained by developers from Supermedium (Diego Marcos, Kevin Ngo) and Google (Don McCurdy). A-Frame is an entity component system framework for Three.js where developers can create 3D and WebXR scenes using HTML. HTML provides a familiar authoring tool for web developers and designers while incorporating a popular game development pattern used by engines such as Unity.

History

[edit]

A-Frame was originally developed within the Mozilla VR team during mid-to-late 2015.[3] A-Frame was created in order to allow web developers and designers to author 3D and VR experiences[4] with HTML without having to know WebGL.[5] A-Frame's first public release was on December 16, 2015.[6] On December 16, 2019 A-Frame version 1.0.0 was released.[7]

Community

[edit]

All online IDEs support A-Frame as a result of being based on HTML. Documentation is available for the API.[8] Support for developers committing to the library is provided via GitHub issues, while support for developers building apps and web pages is provided via StackOverflow.[9] Real-time on-line support is provided via Slack.[10]

Usage

[edit]

Mozilla Hubs chat room software uses A-Frame.[11]

Example

[edit]
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.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>

See also

[edit]

References

[edit]
  1. "A-Frame". A-Frame. 1 April 2025. Retrieved 31 January 2026.
  2. "A-Frame". A-Frame. Retrieved 2016-10-25.
  3. "Introducing A-Frame: Building Blocks for WebVR". Mozilla VR Blog. 2015-12-16. Archived from the original on 2017-09-10. Retrieved 2016-10-26.
  4. Lang, Ben (2015-12-16). "Mozilla A-Frame: WebVR Starting With One Line of Code". Road to VR. Retrieved 2016-10-25.
  5. "Mozilla makes it easy to create VR websites with 'A-Frame'". Engadget. 17 December 2015. Retrieved 2016-10-25.
  6. "Mozilla Releases A-Frame WebVR Framework". AR VR Magazine. 2015-12-18. Archived from the original on 2017-09-10. Retrieved 2016-10-25.
  7. "A-Frame v1.0.0 - WebXR Support, AR Mode". A-Frame. Retrieved 30 March 2020.
  8. "Introduction — A-Frame". aframe.io. Retrieved 2016-10-25.
  9. "Newest 'aframe' Questions". stackoverflow.com. Retrieved 2016-10-25.
  10. Slack. "Slack". aframe.io. Retrieved 2016-10-25.
  11. "mozilla/hubs". Mozilla. 29 March 2020. Retrieved 30 March 2020.
[edit]