≡

A-Frame

0.5.0 › Introduction

Installation

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

This installation section will show several ways to get started with A-Frame. Although many of the ways don’t require any actual installation since A-Frame is primarily HTML and JavaScript.

Code Editors in the Browser

The fastest way to start playing from within the browser.

Remix on Glitch

Glitch

Glitch provides an online code editor with instant deploying and hosting of web sites. The editor supports both front-end and back-end code as well as multiple files and directories. Glitch lets us remix (i.e., copy) existing projects and make them our 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 we will provide your own custom URL name.

Below are a few other A-Frame Glitches for starters:

Other Code Editors

Below are a couple other A-Frame starter kits on other browser-based code editors. Both support remixing or forking:

Local Development

Use a Local Server

For the options below, we should develop projects using a local server so that files are properly served. Options of local servers include:

  • Downloading the Mongoose application and open it from the same directory as your HTML file.
  • Running python -m SimpleHTTPServer in a terminal in the same directory as your HTML file.
  • Running npm install -g live-server && live-server in a terminal in the same directory as your HTML file.

Once we are running our server, we can open our project in the browser using the local URL and port which the server is running on (e.g., http://localhost:8000). Try not to open the project using the file:// protocol which does not provide a domain; absolute and relative URLs may not work.

Download the Boilerplate on GitHub

The boilerplate contains:

We can grab the boilerplate in one of two ways:

Fork on GitHub

Download .ZIP

Include the JS Build

To include A-Frame into an HTML file, we drop a <script> tag pointing to the CDN build:

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

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

Production Version 0.5.0 Minified Development Version 0.5.0 Uncompressed with Source Maps

Install from npm

We can also install A-Frame through npm:

$ npm install aframe

Then we can bundle A-Frame into our application. For example, with Browserify or Webpack:

require('aframe');

If you use npm, you can use angle, a command line interface for A-Frame. angle can initialize a scene template with a single command:

npm install -g angle && angle initscene
Edit Page