aframe

πŸ…°οΈ web framework for building virtual reality experiences.

Showing:

Popularity

Downloads/wk

8.5K

GitHub Stars

13.4K

Maintenance

Last Commit

1mo ago

Contributors

392

Package

Dependencies

12

License

MIT

Type Definitions

Tree-Shakeable

No?

Reviews

Average Rating

4.7/516
Read All Reviews
Zac10ck
riccardogiorato
yadev64

Top Feedback

4Easy to Use
3Great Documentation
2Performant
2Highly Customizable
2Bleeding Edge
2Responsive Maintainers

Readme

A-Frame

A-Frame

A web framework for building virtual reality experiences.

Build Status Coverage Status Downloads Version License

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

Special Sponsors

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:

Remix Fork

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

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

And get in touch with the maintainers!

Contributing

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

You can also support development by buying a gorgeous A-Frame t-shirt with exclusive designs

License

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

Rate & Review

Great Documentation3
Easy to Use4
Performant2
Highly Customizable2
Bleeding Edge2
Responsive Maintainers2
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Abin AbrahamSaudi Arabia64 Ratings30 Reviews
Never let a computer know you're in a hurry.
3 months ago
Easy to Use

AFrame is an amazing tool to get your hands dairy on Virtual Reality , it's easy to use the framework to create the virtual reality world.it’s well integrated with the react native and can be incorporated into your web app with ease.it's not as powerful as react VR but its very easy and customizable and that makes your works so easy. I have been using AFrame for multiple occasions, including my side projects to our telemedicine application. Currently, we are incorporating the AFrame into our HIMS - Telemedicine application in order to provide the customer with an immense personalized experience when using our telemedicine application.


0
Riccardo GioratoPadua32 Ratings30 Reviews
Fullstack - Developer on JAMStack, React and more web stuff every day!
11 days ago

A-Frame was one of the best frameworks to build VR experiences on the web but it has been deeply abandoned. The main company behind it was VC funded and pivoted or closed down and nowadays development to it is super limited and slow. Now you can use much better solutions like React Three Fiber where you can build 3D and VR experiences using much less code and also in a faster way by encapsulating it with react components.


0
Yadev JayachandranMannam, North Parur, Ernakulam Dist., Kerala, India.17 Ratings99 Reviews
Maker . Programmer . Designer
November 17, 2020
Easy to Use
Great Documentation

AFRAME opens up a different way to look at websites. With this framework, we can now easily build websites that are VR contents. ie, the users don't need to download complete application to experience VR content but rather just visit the website.


0
RichardShenZhen, China9 Ratings0 Reviews
developer
1 month ago
Alex Front12 Ratings0 Reviews
2 months ago

Tutorials

No tutorials found
Add a tutorial