A-Frame Beginners Workshop

An introduction to WebVR

Berlin - 10.08.2017

By Andrés Cuervo & Stefanie Doll


  • Detect VR devices and query their capabilities
  • Check if the device supports the presentation mode
  • Poll the device’s position and orientation
  • Display and re-render imagery
    on the device

Browser Support

Microsoft Edge

Chrome for Android



Samsung Internet

Oculus Carmel


WebVR Polyfill

Check out https://webvr.rocks/ for browser support

Supported devices

VR Headsets

Mobile Phone &



Other Browser API's involved



Web Audio



and more...


Is a javascript framework for building VR experiences on the web.

  • It's cross-platform ...
  • easy to use ...
  • and easy to extend!


            Entity Box = Geometry + Material + Position

            Entity Ball = Geometry + Material + Position + Velocity + Physics

Entity is an empty container <a-entity>

Components add a certain apperance, behaviour and/or functionality

System provides the global scope <a-scene >


Setup of repetitive tasks & components needed

  • WebGL & WebVR setup
  • Canvas setup
  • Default camera & lightning
  • Initializes scene rednering and re-rendering
  • It loads three.js and webvr-polyfill.js


Entities, components and primitives

Entities and components





Lesson 1

Go to: https://berlin-aframe-workshop.glitch.me
and click on the "Remix this project!" link

Then click "Show live" in the upper left corner and click on Lesson 1 "Playing with primitives".

A-Frame inspector

ctrl + alt + i


It provides a basic shape for an entity



Materials — Color

It gives appearance to an entity



Positioning & Rotation

Right-handed coordinate system

Image from http://what-when-how.com/

Position component

Position component

It places entities at certain spots in 3D space

Position is relative to <a-scene> or the parent-element.



Rotation component

It defines the orientation of an entity

Positioning & Rotation

#### Some other things to know: - default position for entities is "`0 0 0`" - the default camera position is "`0 1.6 0`" - Position is relative to a-scene or to the parent element


Positioning & Rotation

(nested (positioning))



  • You can animate different properties and types
  • Rotation, position, color, opacity, radius, scale ...
  • Attributes: Speed, easing, repeat, direction...
  • Attach <a-animation> component as a child



Images and Videos as material

Use the 'src' attribute of the material component

  • 360 videos, equirectangular images
  • Flat images & videos
  • You can use it on all geometries

360 video


Images & tiled images


The power of two

power of 2 error
  • WebGL expects images to be the power of two
  • 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, ...
  • If you can't change the ratio / size, use the npot attribute of the material component
  • Always use "power of two" images for tiles (repeat)


Importing 3D objects

You can use 3D-Objects in your A-Frame scenes.

Exports from Unity, Blender, Google Blocks, Sketchfab (...) and shared ressources.

Suppoerted file-types

  • COLLADA files (.DAE)
  • GL Transmission Format (.glTF)
  • Wavefront (.obj & .mtl)

Use together with the scale component

Example: Google Blocks Import


Models by "Anna dream brush" & Timothy 'YM' Johnson



  • A-Frame has a built-in Asset Management System
  • Better performance because of caching, preloading & reuseability
  • Images, videos, 3D-Models, audio



  • To reuse self-defined sets of component properties

Assets & Mixins – Code example

The ID of the asset or mixin is used as a refenrence on the entity.



Lesson 3

Try to rebuild this scene!

Got back to the course overview and follow the links for Lesson 3.

A Brief Note: Components!

See a pattern?

A-Frame is built on the concept of components:

Javascript that hooks into the component lifecycle (`init`, `tick`, `remove`, etc.).

Allows you to define more complicated behavior to make custom interactions, materials, & more!

A Tiny Component

          AFRAME.registerComponent('my-color', {

              schema : {

                color : { default : '#DDAADD' }


              init : function () {

                  this.el.setAttribute('material', 'color', this.data.color)}});




Interact with a scene

  • Large variety of platforms, devices & input methods.
  • Desktop computers, phones, VR Headsets, 3DoF, 6DoF
  • Actions: Grab, throw, rub, flip, poke, stretch, press...
  • 11 built-in components for interactions in A-Frame
  • ...plus custom controllers

Built-in components

Built-in components

Cursor component

  • Provides states on top of the raycaster component
  • click, fuse, mousedown, mouseenter, mouseleave, mouseup
  • Add your event listeners in Javascript

Cursor component html

Cursor component Javascript


Using the event-set component

Register event listeners without Javascript


Lesson 5

Go back to your remix of



Use the aframe-event-set-component

to change the color of the <a-box> on mouseenter and mouseleave.

Thank's for your time.

Keep on building!

Further reading


3D Models & Ressources