aframe

:a: Web framework for building virtual reality experiences.

16,566

3,929

16,566

409

View on GitHub View on NPM

Top Related Projects

Babylon.js

23,014

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

engine

9,523

JavaScript game engine built on WebGL, WebGPU, WebXR and glTF

Quick Overview

A-Frame is an open-source web framework for building virtual reality (VR) experiences. It allows developers to create 3D and VR content using HTML and Entity-Component System (ECS) architecture. A-Frame is built on top of Three.js and works across various platforms, including desktop, mobile, and VR headsets.

Pros

Easy to learn and use, especially for web developers familiar with HTML
Cross-platform compatibility, supporting various devices and browsers
Large and active community with extensive documentation and examples
Extensible through custom components and integrations with other web technologies

Cons

Performance limitations for complex scenes or large-scale applications
Limited built-in physics capabilities compared to dedicated game engines
Steeper learning curve for advanced features and optimizations
Dependency on browser support and WebVR/WebXR implementations

Code Examples

Creating a basic 3D scene:

<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>

Adding interactivity with components:

<a-scene>
  <a-box
    position="-1 0.5 -3"
    rotation="0 45 0"
    color="#4CC3D9"
    animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"
    event-set__enter="_event: mouseenter; color: #8FF7FF"
    event-set__leave="_event: mouseleave; color: #4CC3D9"
  ></a-box>
</a-scene>

Creating a custom component:

AFRAME.registerComponent('change-color-on-click', {
  init: function () {
    var el = this.el;
    el.addEventListener('click', function () {
      el.setAttribute('material', 'color', '#' + Math.floor(Math.random()*16777215).toString(16));
    });
  }
});

Getting Started

Include A-Frame in your HTML file:

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

Create a basic scene:

<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>

Open the HTML file in a WebVR-compatible browser to view your 3D scene.

Competitor Comparisons

three.js

101,622

JavaScript 3D Library.

Pros of three.js

More flexible and powerful for complex 3D scenes and custom rendering
Larger ecosystem with extensive documentation and community support
Better performance for high-demand applications

Cons of three.js

Steeper learning curve, requiring more low-level programming
Less abstraction, leading to more verbose code for simple scenes
No built-in VR/AR support, requiring additional libraries or custom implementation

Code Comparison

three.js:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

A-Frame:

<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>

Babylon.js

23,014

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Pros of Babylon.js

More powerful and flexible for complex 3D applications
Better performance for large-scale scenes and high-poly models
Extensive documentation and active community support

Cons of Babylon.js

Steeper learning curve, especially for beginners
Requires more code to set up basic scenes compared to A-Frame
Less focus on WebVR/WebXR, though still supported

Code Comparison

A-Frame (HTML-based scene creation):

<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-scene>

Babylon.js (JavaScript-based scene creation):

const scene = new BABYLON.Scene(engine);
const box = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2.5}, scene);
const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height: 1.5, diameter: 1}, scene);
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4}, scene);

engine

9,523

JavaScript game engine built on WebGL, WebGPU, WebXR and glTF

Pros of PlayCanvas engine

More performant and optimized for complex 3D scenes and games
Offers a comprehensive visual editor for scene building and asset management
Provides a robust entity-component system for game development

Cons of PlayCanvas engine

Steeper learning curve compared to A-Frame's declarative approach
Less focused on WebVR/AR experiences specifically
Requires more setup and configuration for basic 3D scenes

Code comparison

A-Frame (HTML-based declarative syntax):

<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-scene>

PlayCanvas engine (JavaScript-based imperative approach):

var app = new pc.Application(canvas);
var box = new pc.Entity('box');
box.addComponent('model', { type: 'box' });
box.setPosition(-1, 0.5, -3);
app.root.addChild(box);

Both engines are powerful tools for 3D web development, with A-Frame focusing on simplicity and accessibility for WebVR/AR, while PlayCanvas offers more advanced features for game development and complex 3D applications.

react-three-fiber

27,091

🇨🇭 A React renderer for Three.js

Pros of react-three-fiber

Seamless integration with React ecosystem and state management
More flexible and customizable for complex 3D scenes
Better performance for large-scale applications

Cons of react-three-fiber

Steeper learning curve, especially for developers new to Three.js
Less out-of-the-box components compared to A-Frame
Requires more manual setup for VR/AR experiences

Code Comparison

A-Frame:

<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-scene>

react-three-fiber:

function Scene() {
  return (
    <Canvas>
      <Box position={[-1, 0.5, -3]} rotation={[0, Math.PI / 4, 0]} />
      <Sphere position={[0, 1.25, -5]} args={[1.25]} />
      <Cylinder position={[1, 0.75, -3]} args={[0.5, 0.5, 1.5]} />
      <Plane position={[0, 0, -4]} rotation={[-Math.PI / 2, 0, 0]} args={[4, 4]} />
    </Canvas>
  );
}

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

A-Frame

A web framework for building virtual reality experiences.

Site — Docs — School — Slack — Blog — Newsletter

Examples

Find more examples on the homepage, A Week of A-Frame, and 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 <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 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 <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!

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:

<html>
  <head>
    <script src="https://aframe.io/releases/1.6.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/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/@c-frame/aframe-particle-system-component@1.2.x/dist/aframe-particle-system-component.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.0/dist/aframe-extras.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fern-solutions/aframe-sky-background/dist/sky-background.umd.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-sky-background top-color="#EBEBF5" bottom-color="#B9B9D2"></a-sky-background>

      <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.6.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

To hang out with the community, join the A-Frame Slack.
Follow A Week of A-Frame on the A-Frame blog.
Follow @aframevr on Twitter.
Subscribe to the Newsletter.

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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of three.js

Cons of three.js

Code Comparison

Pros of Babylon.js

Cons of Babylon.js

Code Comparison

Pros of PlayCanvas engine

Cons of PlayCanvas engine

Code comparison

Pros of react-three-fiber

Cons of react-three-fiber

Code Comparison

Convert designs to code with AI

README

A-Frame

Examples

Features

Usage

Example

Builds

npm

Local Development

Generating Builds

Questions

Stay in Touch

Contributing

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days