Getting Started

Welcome! Make sure to read the introduction. If you’re ready to go, there are multiple ways of getting started.

Table of Contents

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 Mozilla VR (@mozvr) on CodePen.

Note: VR mode currently won’t work until the allowvr attribute is added to CodePen’s I-Frames. Make sure the A-Frame <script> tag is located in the HTML panel above the <a-scene> tag.

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