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 <a-scene>.
:heart: Declarative HTML: A-Frame is accessible to all developers due to its easy-to-read and copy-and-pastable HTML.
⚙ Entity-component pattern: A-Frame is a powerful framework for three.js, providing an declarative, composable, reusable entity-component architecture.
🔨 Tool agnostic: A-Frame interoperates beautifully with JavaScript DOM APIs and most libraries such as React, Vue.js, Angular, or d3.js.
:mag: Visual Inspector: A-Frame provides a built-in visual inspector that acts just like your browser's DevTools; open up a scene and hit <ctrl> + <alt> + i.
:package: Registry: A-Frame has a Registry, a curated component repository similar to the Unity Asset Store. Install some components and use them right from your HTML.
To get started playing now, open this CodePen example scene.
<html>
<head>
<title>My A-Frame Scene</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>
To use the latest stable build of A-Frame, include aframe.min.js:
<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 dist/ folder.
npm install --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.
A Week of A-Frame on the A-Frame blog.Get involved! Check out the Contributing Guide for how to get started.
This program is free software and is distributed under an MIT License.
0.5.0 (February 09, 2017)
0.5.0 contains text, glTF support, patches to enable WebVR record-and-replay tools, WebVR polyfill updates, enhancements, and bug fixes.
text component for SDF and MSDF text. (#2289)gltf-model component for loading glTF 3D models. (#2333)tracked-controls event listeners even if no physical controllers are
present. (#2314)Entity.removeAttribute(component, property) reset a property value to its default. (#2353)AFRAME.utils.throttleTick and AFRAME.utils.throttle utils. (#2189)hand-controls to check for "not Oculus Touch" rather than "is Vive"
to make hand-controls be compatible with community control components
(e.g., GearVR). (#2192)setAttribute(mixinId, ''). (#2291)screenshot component canvas (#2316).stats component UI more readable. (#2313)VREffect to allow player scaling. (#2328)raycaster.interval not being applied. (#2363)vive-controls not tracking. (#2194)envify causing issues when installing from npm with a bundler. (c62690)setAttribute using data instead of attrValue. (#2184)null and when trying to override. (#2209)vr-mode-ui is disabled and embedded is enabled. (4607e2)AFRAME.utils.deepEqual. (#2229)init and update handlers being called when doing flushToDOM on
non-loaded entity. (#2250).fog. (#2251)pause and remove handlers not getting called on scene detach. (#2302)look-controls instances colliding. (#2335)FAQs
A web framework for building virtual reality experiences.
The npm package aframe receives a total of 5,516 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.