A web framework for building virtual reality experiences.
:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebVR
boilerplate required to get running across platforms including mobile, desktop,
Vive, and Rift just by dropping in
:heart: Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, educators, artists, makers, kids.
:globe_with_meridians: Cross-Platform: Build VR applications for Vive, Rift, Daydream, GearVR, and Cardboard. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.
:zap: Performance: A-Frame is optimized from the ground up for WebVR. While
A-Frame uses HTML, Custom Elements don't touch the browser layout engine. All
3D object updates are all done in memory with little overhead under a single
:mag: Visual Inspector: A-Frame provides a built-in visual 3D inspector
with a workflow similar to a browser's developer tools and interface similar to
Unity. Open up any A-Frame scene and hit
<ctrl> + <alt> + i.
:package: Registry: Reuse powerful components that other A-Frame developers have created and shared. The A-Frame Registry collects and curates components similar to the Unity Asset Store. Stand on the shoulders of giants and plug in components right from HTML.
:runner: Features: Hit the ground running with A-Frame's built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, Vive / Touch / Cardboard controls. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, or teleportation!
Build VR scenes in the browser with just a few lines of HTML! To start playing and publishing now, remix the starter example on Glitch:
<html> <head> <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>
With A-Frame's entity-component architecture, we can drop in community components from the ecosystem (e.g., ocean, physics) and plug them into our objects straight from HTML:
<html> <head> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script> <script src="https://unpkg.com/[email protected]%5E3.5.x/dist/aframe-extras.ocean.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/gradientsky.min.js"></script> </head> <body> <a-scene> <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity> <a-entity id="sphere" geometry="primitive: sphere" material="color: #EFEFEF; shader: flat" position="0 0.15 -5" light="type: point; intensity: 5" animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity> <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4" material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1" rotation="-90 0 0"></a-entity> <a-entity id="sky" geometry="primitive: sphere; radius: 5000" material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210" scale="-1 1 1"></a-entity> <a-entity id="light" light="type: ambient; color: #888"></a-entity> </a-scene> </body> </html>
To use the latest stable build of A-Frame, include
<head> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> </head>
To check out the stable and master builds, see the
npm install --save aframe # Or yarn add --save aframe
require('aframe') // e.g., with Browserify or Webpack.
git clone https://github.com/aframevr/aframe.git # Clone the repository. cd aframe && npm install # Install dependencies. npm start # Start the local development server.
And open in your browser http://localhost:9000.
npm run dist
For questions and support, ask on StackOverflow.
Stay in Touch
- To hang out with the community, join the A-Frame Slack.
A Week of A-Frameon the A-Frame blog.
- Follow @aframevr on Twitter.
Get involved! Check out the Contributing Guide for how to get started.
This program is free software and is distributed under an MIT License.