JavaScript CSS HTML
Clone or download
Latest commit 2055922 Aug 14, 2018
Permalink
Failed to load latest commit information.
.github move stackoverflow nudge in issue template to the bottom Jan 20, 2017
dist Update master CDN URL. (https://rawgit.com/aframevr/aframe/e118591/di… Aug 12, 2018
docs fix systems.md Aug 13, 2018
examples fix dynamic lights example having aframe twice Jul 5, 2018
scripts Change date format to ISO8601 (#3203) Oct 30, 2017
src Bump aframe-master dist/ builds. (6c593aa...6bde785) Aug 12, 2018
tests Merge pull request #3651 from donmccurdy/bug-font-page-urls Aug 7, 2018
vendor Correcting mistake in vertices calc & removing to match three.js Jun 4, 2018
.gitattributes Aframe gitattributes based on conversations #1586 (#1825) Aug 20, 2016
.gitignore Ignore package-lock.json for now Dec 13, 2017
.jshintrc Add browserify env to .jshintrc (#1831) Aug 20, 2016
.nojekyll allow `ghpages` npm command to push to GH Pages of fork (fixes #197) Sep 24, 2015
.npmignore exclude dist/aframe-v* and minified dists from npm Feb 2, 2017
.travis.yml add node compatibility and regression test (#2484) Mar 15, 2017
CHANGELOG.md Fix Changelog formatting Apr 15, 2018
CODE_OF_CONDUCT.md adapt rust code of conduct as base for aframe code of conduct (fixes #… Jul 22, 2016
CONTRIBUTING.md add additional contributing instructions for adding glitches Aug 28, 2017
LICENSE Update LICENSE (#2238) Jan 4, 2017
ORGANIZATION.md organization.md file (fixes #970) Mar 20, 2016
README.md update showcase Jun 7, 2018
ROADMAP.md tweak/update roadmap a bit Apr 18, 2018
codecov.yml make codecov find the codecov.yml config Aug 22, 2016
index.html The Purge II: add vr-markup examples, change port to 9001 Sep 24, 2015
package.json Bump to THREE r95 Aug 1, 2018

README.md

A-Frame

A-Frame

A web framework for building virtual reality experiences.

Build Status Coverage Status Downloads Version License

Site β€” Docs β€” School β€” Slack β€” Blog

Examples

Supercraft A-Painter Supermedium A-Blast A-Saturday-Night Musical Forest by @googlecreativelab

Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.

Features

πŸ‘“ 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>.

❀️ 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.

πŸ”Œ 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.

⚑️ 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!

Usage

Example

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:

Remix

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/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:

Remix

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.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>

Builds

To use the latest stable build of A-Frame, include aframe.min.js:

<head>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
</head>

To check out the stable and master builds, see the dist/ folder.

npm

npm install --save aframe
# Or yarn add aframe
require('aframe')  // e.g., with Browserify or Webpack.

Local Development

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.

Generating Builds

npm run dist

Questions

For questions and support, ask on StackOverflow.

Stay in Touch

Contributing

Get involved! Check out the Contributing Guide for how to get started.

License

This program is free software and is distributed under an MIT License.