1 of 10

A-Frame VR

from Mozilla

@donrmccurdy

Building blocks for the virtual reality web

2 of 10

What’s WebVR?

“WebVR is an experimental Javascript API that provides � access to Virtual Reality devices, such as the Oculus � Rift or Google Cardboard, in your browser.”

https://w3c.github.io/webvr/

​

​

​

WebGL + WebVR + THREE.js + A-Frame VR

3 of 10

A-Frame Markup.

<a-scene>

​

<!-- Robot -->

<a-entity collada-model="url(robot.dae);"

path="radius: 5;"

battery="status: 1.0;" />

​

</a-scene>

4 of 10

Also, JavaScript.

AFRAME.registerComponent('path', {� schema: {radius: {default: 1}},� init: function () {� this.position = new THREE.Vector3();� },� tick: function (t) {� this.position.x = Math.sin(t / 1000);

this.position.z = Math.cos(t / 1000);

this.position.multiplyScalar(this.data.radius);� this.el.setAttribute('position', this.position);� }�});

​

5 of 10

Also, JavaScript.

AFRAME.registerComponent('battery', {� schema: {status: {default: 1.0}},� init: function () { … },� tick: function (t, dt) {

this.data.status -= 0.0001 * dt;

if (this.data.status <= 0) {

this.el.components.path.pause();

this.el.emit('explode');

}

}�});

6 of 10

Community Components

  • Firebase multiplayer syncing
  • React + A-Frame boilerplate
  • Cannon.js physics
  • Text rendering
  • Video playback controls
  • Gamepad controls
  • Leap Motion
  • Augmented Reality (AR) features
  • … more at github.com/aframevr/awesome-aframe

7 of 10

Resources

Website: aframe.io

GitHub: github.com/aframevr/aframe

Slack: aframevr-slack.herokuapp.com

Twitter: @aframevr

@donrmccurdy

Thanks!

8 of 10

9 of 10

Entity Component System (ECS).

Pattern from Game Development.

Composition > Inheritance.

By @rubenmueller

10 of 10

Miscellaneous

MagicaVoxel: ephtracy.github.io

StackOverflow: #aframe

WebVR Boilerplate: github.com/borismus/webvr-boilerplate

Chrome builds: webvr.info/get-chrome/