A-Frame VR Framework

Like many other techies, after reading Neuromancer or Snow Crash the idea of a 3D internet has been a distant dream.  There have been attempts certainly, like VRML 1 and 2 for example, or the online MMO Second Life, but none of really come close.  These days however a number of technologies are converging that might actually make it possible.  Fast computers, fast internet connections, WebGL in the browser and perhaps most importantly the rise of consumer level VR headsets.  All of these technologies combine to make the 3D web a possibility and A-Frame brings them all together.  A-Frame was founded by Mozilla, is an open source project that builds a VR framework over top of the popular open source Three.js engine.  You develop your game works using a HTML5 style markup working with a familiar entity/component model.

Here is a simple A-Frame application.

<!DOCTYPE html>  <html>  <head>      <title>Hello, WebVR! - A-Frame</title>      <meta name="description" content="Hello, WebVR! - A-Frame">      <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>  </head>  <body>  <a-scene fog="type: linear; color: #AAA">      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>      <a-sky color="#ECECEC"></a-sky>  </a-scene>  </body>  </html>  

Run this in browser and you will see:


Run it in a browser using a VR headset and you will have full 3D head tracking.  Even cooler, hit Ctrl + Alt + I and you get access to the inspector:


Giving you full access over the entities making up your scene, the components attached to them and even give you the ability to create completely new ones.  If you are interested in learning more be sure to check out the video below.


Scroll to Top