≡

A-Frame

0.3.0 › Introduction

Getting Started

Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

Welcome! Make sure to read the introduction. If you’re ready to go, we have several ways of getting started.

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. Check out the official MozVR CodePens and the A-Frame Hello World CodePen:

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

Grab the Boilerplate

The boilerplate contains:

We can grab the boilerplate in one of two ways:

Fork on GitHub

Download .ZIP

We should develop with 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.
  • Or use Node and npm to start the local server with npm install && npm run start.

Include the JS Build

If we want to just 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.3.2/aframe.min.js"></script>

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

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

Production Version 0.3.2 Minified Development Version 0.3.2 Uncompressed with Source Maps

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');
Edit Page