An Introduction to

A-Frame

It's A Framework

for easily working

with WebGL and VR

Use markup to create
VR experiences that work
across desktop, iOS, Android,
and VR Headsets

Entity: an object

<a-entity>

Common entities

<a-box>, <a-sphere>, <a-plane>, <a-obj-model>

and many more...

Component: a property

<a-entity width="2">

Common components:

width, height, depth, radius, material, geometry, src, id, position, rotation

and many more...

Creating a red box

<a-scene>
  <a-box
    color="red"
  ></a-box>
</a-scene>

... that's it!

Oh...there's a bit more

Sizing

You can either use
width="2" height="2" depth="2"
or the geometry component:
geometry="width: 2; height: 2; depth: 2"

Scaling

Specified in terms of x, y and z axis
scale="1 1 1"
Can use negative numbers to mirror an axis
scale="-1 -1 1"

Positioning

Starts from 0 0 0 in your scene
Specified in terms of x, y and z axis
position="0 0 0"

Materials

The appearance of an entity
Used to define color, opacity
rendering effect and texture src
material="color: red; opacity: .5"

Lighting

Cast light in your scene
Types: ambient, directional,
hemisphere, point, spot
Can also specify the color, intensity, angle

Assets

Used for preloading textures,
sounds, videos, and defining mixins

<a-assets>
  <img id="texture1" src="texture.png" />
  <audio id="coin" src="coin.mp3"></audio>
  <video id="rick" src="nggyu.mp4"></video>
  <a-mixin id="massive" scale="10 10 10"></a-mixin>
</a-assets>

Animating

Specify the attribute to animate, the state to go from and to, the duration, of the animation, the fill mode, repeat count, direction and easing method.

<a-entity ...>
  <a-animation
    attribute="rotation"
     dur="10000"
     fill="forwards"
     to="0 360 0"
     easing="linear"
     repeat="indefinite"
   ></a-animation>
</a-entity>

Interaction
Interact with entities
through clicking or gazing

Basically...
when you look at stuff
you can make stuff happen

Read the A-Frame
docs for cursor

Manipulating
things with Javascript

Vanilla JavaScript

.querySelector('a-image')
.getAttribute('opacity')
.setAttribute('material', 'color', 'red')
.addEventListener('collide')
.createElement('a-entity')

With libraries...

// jQuery
$('a-box').attr('width', 5);

// d3
d3.select('a-scene')
  .selectAll('a-box.bar')
  .data(data);

If you hate writing
HTML-esque markup

Use a templating language!

// Jade/Pug example
a-scene(
  fog='type: linear; far: 20; color: #1a1a1a'
)
  a-entity(
    position='2 2.5 0'
    rotation='0 12 0'
  )
    each foo,index in locals.bar
      a-entity(
        position=(index * 1.4) + ' 0 ' + (index * -2)
        rotation='0 ' + (index * -15) + ' 0'
      )

A short guide

blog.omgmog.net/gdd-aframe-guide

Boilerplate

github.com/aframevr/aframe-boilerplate

Official docs

aframe.io/docs/0.2.0/guide

More examples

aframe.io/aframe/examples