Chronicling the development of dlux.io:

dlux aims to bring blogging to virtual reality. How user's interact with virtual environments will be different based on their control schemes. Some users have a keyboard and mouse, some a head mounted display(HMD), but most will have nothing more than a mobile phone with a magic window(or placed in Google Cardboard). Unfortunately this means for ease of development we will give all our users a single raycaster.

Once a post/environment is loaded the menu system will need to disappear so users can interact with content in the scene. This means our user will need to have a method to call the menu back, to play/pause, or unload the scene all together.

A-frame only has two classes, Scene and Entity. You can only have one scene, all entities are appended to it, or to other entities. By adding properties to entities as you build them out.

To start we define our scene in the body(this is explained as standalone code):

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  </body>
</html>

From here on we will be working exclusively in the <a-scene> tag; declaring all entities to be the child of the scene. Let's throw some things in the scene to look at, give us a point of reference.

<a-scene>
  <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>

Now when you load this page you'd be presented with a static scene, the camera is defined for you but no control mechanism exists.

<a-entity camera position="0 1.6 0 " universal-controls mouse-controls>

Now you should be able to move around with wasd and look around with the mouse.

<a-entity camera position="0 1.6 0 " universal-controls mouse-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"
                material="color: blue; shader: flat">
      </a-entity>
    </a-entity>

Now to give us our ray-caster! We will use the built in cursor tag with it's attributes. Notice here we attached the cursor as a child of the camera, and placed it in front of the camera on it's Z axis. The cursor will now be able to trigger events.

Our final issue to tackle is a method to bring back the menu after exploring our scene.

 <a-scene>
    <a-entity camera position="0 1.6 0 " universal-controls mouse-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"
                material="color: blue; shader: flat">
      </a-entity>
    </a-entity>
  <a-sphere cursor-listener position="0 0 0" scale="0.5 0.5 0.5" transparent=true opacity=0 universal-controls mouse-controls></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>

Here I put an appropriately sized sphere at 0,0,0. The camera is at 0 1.6 0. Both of them have control schemes attached to them, and now the invisible sphere will follow the camera around.

AFRAME.registerComponent('cursor-listener', {
  init: function () {
    this.el.addEventListener('click', function (evt) {
      this.setAttribute('material', 'opacity', 1.0);
    });
  }
});