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 WebVR
boilerplate required to get running across platforms including mobile, desktop,
Vive, and Rift 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 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, WebVR, 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 WebVR experiences.
: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.
: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 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/0.9.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.9.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.0.4/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/0.9.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.
This program is free software and is distributed under an MIT License.
0.9.0
Performance improvements, WebXR support, Inspector updates!
We continued to battle test A-Frame to produce native-like VR experiences and continue to add large performance gains. We have also introduced initial WebXR support! Although the spec is heavily in flux and yet to have feature parity with WebVR 1.1, we had A-Frame get a head start to help test it out and smooth out the changes.
<a-animation> in favor of new animation component (#3678).collada-model component (#3866).renderer.colorManagement property (disabled by default) to accurately match colors against modeling tools, but may changes in scene colors when flipped on. renderer.gammaFactor will be set to 2.2. Call scene.renderer.systems.applyColorCorrection on THREE.Colors and THREE.Textures to normalize changes (#3757)..setObject3D. raycaster.objects should be specified (e.g., objects: [data-raycastable] or objects: .raycastable) because raycasting is expensive. raycaster.recursive property removed (#3980) but will default to be recursive only under objects defined via .setObject3D (#3652).renderer component (#3757).antialias attribute moved to renderer.antialias.raycaster-intersected no longer directly contain intersection data. Use .getIntersection function supplied in event detail or el.components.raycaster.getIntersection(el) to retrieve intersection data. Done to reduce garbage (a87e3b).link.visualAspectEnabled), link component defaults to purely to listening to an event to trigger navigation (#3743).wasd-controls to prevent judders during framedrops (#3830).tracked-controls to fix children of camera and controllers not following parent (#3867).matrixAutoUpdate for tracked-controls outside VR (643fdc).el.object3DMap versus arbitrary children (8809e7)..setAttribute on them (#3738).sound.on (#3844).raycaster.objects is not set. But you should always set it (#3840).daydream-controls trigger not working with cursor by default (#3916).oculus-go-controls, thanks Oculus! (cbbe75)vive-focus-controls (#3876).loading-screen component (#3760).?inspector={selector} and Entity.inspect() to automatically launch Inspector and focus on entity (#3894).renderer.highRefreshRate to enable 72hz mode on Oculus Browser (#3967).tracked-controls.autoHide property to configure whether controllers automatically hide when connected or disconnected (#3912).material.blending property (#3543).light.shadowRadius property (21b38).animation__foo__bar) (030023).renderer.logarithmicDepthBuffer option (d210a2).look-controls.reverseTouchDrag property (#3761).sound.playSound() (2b2819).html.a-fullscreen) (#3828).displayconnected event when headset connected (#3918).buildData if updating component directly. 2x speed boost on .setAttribute (#3835).navigator.getGamepad calls in tracked-controls (#3816)..setAttribute(component, propertyName, value) (#3812).raycaster.objects (#3839).Kevin spent some time getting the Inspector into ship shape.
?inspector={selector} to automatically launch Inspector and focus on entity.o shortcut to toggle transform widget.esc shortcut to unselect entity.FAQs
A web framework for building virtual reality experiences.
We found that aframe-cv demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers