Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aframevr/aframe

:a: Web framework for building virtual reality experiences.
https://github.com/aframevr/aframe

3d aframe augmented-reality daydream ecs game-development game-engine gamedev html metaverse oculus rift threejs virtual-reality virtualreality vive vr webgl webvr webxr

Last synced: 3 days ago
JSON representation

:a: Web framework for building virtual reality experiences.

Awesome Lists containing this project

README 

        
A-Frame



A-Frame



A web framework for building virtual reality experiences.





  

    Coverage Status

  

  

    Downloads

  

  

    Version

  

  

    License

  






  Site

  —

  Docs

  —

  School

  —

  Slack

  —

  Blog

  —

  Newsletter




## Examples





  Supercraft





  A-Painter





  Supermedium





  A-Blast





  A-Saturday-Night





  Musical Forest by @googlecreativelab




*Find more examples on [the homepage](https://aframe.io), [A Week of A-Frame](https://aframe.io/blog/), and [WebVR Directory](https://webvr.directory).*



## Features



: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 ``.



: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 ` +  + 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!



## Usage



### Example



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:



[![Remix](https://cloud.githubusercontent.com/assets/674727/24572421/688f7fc0-162d-11e7-8a35-b02bc050c043.jpg)](https://glitch.com/~aframe) [![Fork](https://user-images.githubusercontent.com/39342/52831020-d42dcb80-3087-11e9-833f-2d6191c69eb9.png)](https://repl.it/@dmarcos/aframe)



```html



  

    

  

  

    

      

      

      

      

      

    

  



```



With A-Frame's [entity-component

architecture](https://aframe.io/docs/1.6.0/introduction/entity-component-system.html), we can drop in community

components from the ecosystem (e.g., ocean, physics) and plug them into our

objects straight from HTML:



[![Remix](https://cloud.githubusercontent.com/assets/674727/24572421/688f7fc0-162d-11e7-8a35-b02bc050c043.jpg)](https://glitch.com/~aframe-registry) [![Fork](https://user-images.githubusercontent.com/39342/52831020-d42dcb80-3087-11e9-833f-2d6191c69eb9.png)](https://repl.it/@dmarcos/aframe)



```html



  

    

    

    

    

  

  

    

      



      



      



      



      

    

  



```



### Builds



To use the latest stable build of A-Frame, include [`aframe.min.js`](https://aframe.io/releases/1.6.0/aframe.min.js):



```js



  



```



To check out the stable and master builds, see the [`dist/` folder](dist/).



### npm



```sh

npm install --save aframe

# Or yarn add aframe

```



```js

require('aframe')  // e.g., with Browserify or Webpack.

```



## Local Development



```sh

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](http://localhost:9000)**.



### Generating Builds



```sh

npm run dist

```



## Questions



For questions and support, [ask on StackOverflow](https://stackoverflow.com/questions/ask/?tags=aframe).



## Stay in Touch



- To hang out with the community, [join the A-Frame Slack](https://aframevr.slack.com/join/shared_invite/zt-f6rne3ly-ekVaBU~Xu~fsZHXr56jacQ).

- [Follow `A Week of A-Frame` on the A-Frame blog](https://aframe.io/blog).

- [Follow @aframevr on Twitter](https://twitter.com/aframevr).

- [Subscribe to the Newsletter](https://aframe.io/subscribe/).



And get in touch with the maintainers!



- [Diego Marcos](https://twitter.com/dmarcos)

- [Don McCurdy](https://twitter.com/donrmccurdy)

- [Kevin Ngo](https://twitter.com/andgokevin)



## Contributing



Get involved! Check out the [Contributing Guide](CONTRIBUTING.md) for how to get started.



You can also support development by [buying a gorgeous A-Frame t-shirt with exclusive designs](https://cottonbureau.com/products/a-frame-og#/9479538/tee-men-standard-tee-vintage-black-tri-blend-s)



## License



This program is free software and is distributed under an [MIT License](LICENSE).