A web framework for building virtual reality experiences.
👓 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
❤️ 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.
⚡ Performance: A-Frame is a thin framework on top of three.js. Although A-Frame uses the DOM, A-Frame does not touch the browser layout engine. Performance is a top priority, being battle-tested on highly interactive WebVR experiences.
🌐 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.
🔍 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.
🏃♂️ Features: Hit the ground running with A-Frame's built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, tracked controllers. 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:
<html> <head> <script src="https://aframe.io/releases/1.2.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/1.2.0/aframe.min.js"></script> <script src="https://firstname.lastname@example.org/dist/aframe-particle-system-component.min.js"></script> <script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script> <script src="https://email@example.com/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/1.2.0/aframe.min.js"></script> </head>
To check out the stable and master builds, see the
npm install --save aframe # Or yarn add 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.
A Week of A-Frameon the A-Frame blog.
And get in touch with the maintainers!
Get involved! Check out the Contributing Guide for how to get started.
You can also support development by buying a gorgeous A-Frame t-shirt with exclusive designs
This program is free software and is distributed under an MIT License.
AFrame is an amazing tool to get your hands dairy on Virtual Reality , it's easy to use the framework to create the virtual reality world.it’s well integrated with the react native and can be incorporated into your web app with ease.it's not as powerful as react VR but its very easy and customizable and that makes your works so easy. I have been using AFrame for multiple occasions, including my side projects to our telemedicine application. Currently, we are incorporating the AFrame into our HIMS - Telemedicine application in order to provide the customer with an immense personalized experience when using our telemedicine application.
A-Frame was one of the best frameworks to build VR experiences on the web but it has been deeply abandoned. The main company behind it was VC funded and pivoted or closed down and nowadays development to it is super limited and slow. Now you can use much better solutions like React Three Fiber where you can build 3D and VR experiences using much less code and also in a faster way by encapsulating it with react components.
AFRAME opens up a different way to look at websites. With this framework, we can now easily build websites that are VR contents. ie, the users don't need to download complete application to experience VR content but rather just visit the website.