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
Remix on Glitch
Play with CodePen
Grab the Boilerplate
Include the JS Build
- Install from npm
Head to the A-Frame School for interactive step-by-step lessons and getting into and learning WebVR!
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.
CodePen is a playground for front-end web development. We can edit
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:
The boilerplate contains:
- A simple HTML file that links to the current version of A-Frame of A-Frame
- An optional local development server
- An easy deployment workflow for GitHub Pages to share with the world
We can grab the boilerplate in one of two ways:
In either case, it is important to serve the project using a local server so that assets load properly.
If we want to include the JS build from the CDN, we can drop a
straight into our HTML:
If we want to serve it locally, we can download the JS build:
Note we should serve the project using a local server so that assets load properly.
For more advanced users who want to use their own build steps, we can install through npm:
Then we can just require A-Frame from our app, perhaps built with Browserify or Webpack:
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.
python -m SimpleHTTPServerin 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
angle, a command line interface for A-Frame: