Getting Started

Welcome to A-Frame! Read the introduction if you haven’t. Once you’re ready to go, it’s easy to get started!

Table of Contents

A-Frame School

Head to the A-Frame School for interactive step-by-step lessons and getting into and learning WebVR!

School

Remix on Glitch

Glitch is a collaborative coding site that provides a full code editor for both frontend and backend code and support for multiple files. Glitch lets you remix existing projects and make them your own, and instantly host and deploy changes for everyone to see.

Hit Remix on this A-Frame project, mess with the HTML in index.html, and see your site published live on each change! The base A-Frame Glitch for example is published at aframe.glitch.me, but you will provide your own custom URL name.

Glitch

Play with CodePen

CodePen is a playground for front-end web development. We can edit HTML and JavaScript directly in the browser with its text editor, see changes live, and share code snippets. This is a fast way to dive in without having to download or install anything. Just add a <script> tag to load the latest version of A-Frame, then create your scene:

See the Pen Hello World — A-Frame by mozillavr (@mozvr) on CodePen.

Check out the official MozVR CodePens and the A-Frame Hello World CodePen:

Grab the Boilerplate

The boilerplate contains:

We can grab the boilerplate in one of two ways:

Fork on GitHub

Download .ZIP

In either case, it is important to serve the project using a local server so that assets load properly.

Include the JS Build

If we want to include the JS build from the CDN, we can drop a <script> tag straight into our HTML:

<!-- Production Version, Minified -->
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<!-- Development Version, Uncompressed with Source Maps -->
<script src="https://aframe.io/releases/0.5.0/aframe.js"></script>

If we want to serve it locally, we can download the JS build:

Production Version 0.5.0 Minified Development Version 0.5.0 Uncompressed with Source Maps

Note we should serve the project using a local server so that assets load properly.

Install from npm

For more advanced users who want to use their own build steps, we can install through npm:

# Latest stable version (https://www.npmjs.com/package/aframe)
$ npm install aframe
# Bleeding-edge version (https://github.com/aframevr/aframe)
$ npm install aframevr/aframe

Then we can just require A-Frame from our app, perhaps built with Browserify or Webpack:

require('aframe');

Using a Local Server

We should develop projects using a local server so that files are properly served. We can either:

  • Download the Mongoose application and open it from the same directory as your HTML file.
  • Run python -m SimpleHTTPServer in a terminal in the same directory as your HTML file.
  • Use Node and npm to start the local server with npm install && npm run start.

If you have npm, you can get started with scene template right from the command line with angle, a command line interface for A-Frame:

npm install -g angle && angle initscene