aframe 0,61,18,25,0,15,0,19 travis-ci npm

:a: web framework for building virtual reality experiences.

A-Frame

A-Frame

A web framework for building virtual reality experiences.

Build Status Coverage Status Downloads Version License

SiteDocsSchoolSlackBlogawesome-aframe

Examples

A-Painter A-Blast A-Saturday-Night Aincraft Musical Forest by @googlecreativelab 360 Image Gallery

Find more examples on the homepage, A Week of A-Frame, and awesome-aframe.

Features

Vive, and Rift just by dropping in <a-scene>.
Vive, and Rift just by dropping in <a-scene>.
Vive, and Rift just by dropping in <a-scene>.
Vive, and Rift just by dropping in <a-scene>.
a-scene>`.
developers, VR enthusiasts, educators, artists, makers, kids.
developers, VR enthusiasts, educators, artists, makers, kids.
developers, VR enthusiasts, educators, artists, makers, kids.
ists, makers, kids.
problem! A-Frame still works on standard desktop and smartphones.
problem! A-Frame still works on standard desktop and smartphones.
problem! A-Frame still works on standard desktop and smartphones.
p and smartphones.
to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
to JavaScript, DOM APIs, three.js, WebVR, and WebGL.
e.js, WebVR, and WebGL.

:zap: Performance: A-Frame is optimized from the ground up for WebVR. While A-Frame uses HTML, Custom Elements don’t touch the browser layout engine. All 3D object updates are all done in memory with little overhead under a single global requestAnimationFrame call.

at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
at home with A-Frame.
ome with A-Frame.
Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.
Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.
Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.
hit <ctrl> + <alt> + i.
components right from HTML.
components right from HTML.
components right from HTML.
components right from HTML.
components right from HTML.
components right from HTML.
components right from HTML.
components right from HTML.
components right from HTML.
components right from HTML.
from HTML.

:runner: Features: Hit the ground running with A-Frame’s built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, Vive / Touch / Cardboard controls. 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.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>

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.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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.5.0/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 --save 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.

Related Repositories

aframe

aframe

:a: web framework for building virtual reality experiences. ...

awesome-aframe

awesome-aframe

A collection of awesome things regarding the A-Frame ecosystem. ...

aframe-react

aframe-react

:sunglasses: Build virtual reality (VR) experiences with A-Frame and React. ...

aframe-extras

aframe-extras

:confetti_ball: Add-ons and helpers for A-Frame VR. ...

aframe-draw-component

aframe-draw-component

HTML5 canvas component for AFrame VR. ...


Top Contributors

dmarcos ngokevin cvan nylki darkwing caseyyee donmccurdy fernandojsg mkungla JoshGalvin mattdesl meta-meta cemkod enjalot FrederickDesimpel bryik gasolin msimpson K4orta amberroy Zeouterlimits mattpolicastro JohnRodney kevinzwhuang roninb captDaylight nhirata IagoLast mayognaise devinmancuso

Dependencies

package version
@tweenjs/tween.js ^16.8.0
browserify-css ^0.8.2
debug ngokevin/debug#noTimestamp
deep-assign ^2.0.0
document-register-element dmarcos/document-register-element#8ccc532b7
envify ^3.4.1
load-bmfont ^1.2.3
object-assign ^4.0.1
present 0.0.6
promise-polyfill ^3.1.0
style-attr ^1.0.2
three ^0.84.0
three-bmfont-text ^2.1.0
webvr-polyfill ^0.9.36
dev browserify ^13.1.0
browserify-derequire ^0.9.4
browserify-istanbul ^2.0.0
budo ^9.2.0
chai ^3.5.0
chai-shallow-deep-equal ^1.4.0
chalk ^1.1.3
codecov ^1.0.1
cross-env ^5.0.1
exorcist ^0.4.0
ghpages 0.0.8
git-rev ^0.2.1
glob ^7.1.1
husky ^0.11.7
istanbul ^0.4.5
jsdom ^9.11.0
karma 1.4.1
karma-browserify ^5.1.0
karma-chai-shallow-deep-equal 0.0.4
karma-chrome-launcher ^2.0.0
karma-coverage ^1.1.1
karma-env-preprocessor ^0.1.1
karma-firefox-launcher ^1.0.0
karma-mocha ^1.1.1
karma-mocha-reporter ^2.1.0
karma-sinon-chai 1.2.4
lolex ^1.5.1
markserv 0.0.20
minifyify ^7.3.3
mocha ^3.0.2
mozilla-download ^1.1.1
replace-in-file ^2.5.3
semistandard ^9.0.0
shelljs ^0.7.7
shx ^0.2.2
sinon ^1.17.5
sinon-chai 2.8.0
snazzy ^5.0.0
too-wordy ngokevin/too-wordy
uglifyjs ^2.4.10
write-good ^0.9.1

Releases

-   v0.3.1 zip tar
-   v0.3.0 zip tar
-   v0.2.0 zip tar
-   v0.2.0-rc1 zip tar
-   v0.1.3 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar