A-Frame Quickstart for Augmented City

Hello! This guide is written for the Augmented City AR/VR lab in Singapore on July 15th 2017, but might be helpful for anyone looking to jump into A-Frame. This first post will orient you to A-Frame itself, and the couple following will focus on VR and AR. Enjoy!

A post shared by rockintosh (@rockintosh) on

Augmented City

The Augmented City event is an all-day workshop focused on quickly prototyping AR/VR experiences on the web, and with a theme of Singapore itself.

What does an augmented Singapore look like? What can it do? What can you do in it? Maybe it tells its own story - its history. Maybe it shows you what music is happening nearby, or which hawker stalls you should try. Maybe lets you see trees that used to be, or shows visualizations of the changing waterline over time as the city grew.

Some more ideas:

A-Frame

This guide will help you quickly get up to speed on using A-Frame, Mozilla's library for declarative authoring of 3D content for virtual reality and augmented reality web experiences. The guide contains links to documentation, learning tools, useful components, tips and tools for debugging, and locations for finding help.

Documentation and Learning

Start Coding

Glitch.com lets you author and run full web projects, with HTML, CSS, JavaScript and Node.js. Create a free account and you can start hacking on A-Frame right away. If you're a more experienced developer, check out the A-Frame installation page to add it to your development environment.

Features and Components

Some basic things to try:

A-Frame's extensibility is an entity component system, which has enabled a huge number of components to be created to add functionality. A few useful modules are listed below. You can create your own components also.

Other A-Frame Projects To Try

Objects and Models

A-Frame supports loading glTF, OBJ and COLLADA models, and there are loads of ways to create your models in those formats, as well as find models you can use. Read more on the 3D Models page on the A-Frame site.

Tools and Debugging

The most important tool for working with A-Frame is the Inspector, shown in the screenshot above. You can read all about A-Frame Inspector and more tools here.

Participating and Getting Help

  • Stack Overflow is the best place to ask a technical question about A-Frame.
  • The A-Frame Slack is fantastic for realtime feedback, community and conversation.
  • Follow on Twitter at @aframevr.
  • Get inspired by A Week of A-Frame, weekly blog posts by core team member Kevin Ngo, who writes up all the cool projects, demos and components.

Read more on the A-Frame Community page.