A web framework for building virtual reality experiences.
Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.
:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebXR
boilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in <a-scene>.
: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 and AR enthusiasts, educators, artists, makers, kids.
:electric_plug: Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebXR, and WebGL.
:zap: 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 WebXR experiences.
:globe_with_meridians: Cross-Platform: Build VR and AR applications for any headset compatible with a WebXR capable browser. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.
: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.
:runner: 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 and AR 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.6.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.6.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/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://unpkg.com/aframe-gradient-sky@1.5.0/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 aframe.min.js:
<head>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
To check out the stable and master builds, see the dist/ folder.
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-Frame on 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.
1.6.0 (May 23, 2024)
Tons of bug fixes. Memory management and performance improvements. API to control tick / tock execution order.
scene.background when the background component is removed (#5417) (@mrxz)processSound callback when sound hadn't loaded yet (#5414) (@mrxz)hand-tracking-controls entity before the hand model has loaded (12d550c6) (@dmarcos)hand-tracking-controls entity when there's no hand tracking available (dbdb9dac) (@dmarcos)a-asset-items (#5491) (@mrxz)setAttribute on a-scene if a system has not yet initialized (#5482) (@mrxz)getComponentPropertyPath (#5467) (@mrxz)hand-tracking-controls don't follow the hand (874fced2) (@dmarcos)setAttribute and modifying object3D directly (#5513) (@mrxz)obb-collider (5da7166e) (@dmarcos)obj-model component (#5499) (@Elettrotecnica)renderer.useLegacyLights instead of the deprecated renderer.physicallyCorrectLights in THREE (#5389) (@vincentfretin)glslVersion for non-raw shaders (#5388) (@mrxz)previousOldData objects when a component is destroyed preventing memory leaks (#5458) (@mrxz)a-scene element (#5465) (@mrxz)laser-controls component (#5435) (@IamTonio)hand-tracking-controls (#5431) (@ehammons11)getComputedAttribut method (#5466) (@mrxz)navigator.xr.offerSession WebXR spec (#5410) (@cabanier)hide-on-enter-vr component analog to hide-on-enter-ar (9e644def) (@dmarcos)FAQs
A web framework for building virtual reality experiences.
The npm package aframe receives a total of 12,084 weekly downloads. As such, aframe popularity was classified as popular.
We found that aframe demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.