Unable to change camera view when using Gaze Cursor Example

0
votes

I used the example code from the Github and plugged it into a boilerplate page: 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! • A-Frame</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.0/aframe-master.js"></script>
    <script>
    AFRAME.registerComponent('cursor-listener', {
      init: function () {
        var lastIndex = -1;
        var COLORS = ['red', 'green', 'blue'];
        this.el.addEventListener('click', function (evt) {
          lastIndex = (lastIndex + 1) % COLORS.length;
          this.setAttribute('material', 'color', COLORS[lastIndex]);
          console.log('I was clicked at: ', evt.detail.intersection.point);
        });
      }
    });
    </script>
  </head>
  <body>
    <a-scene>
      <a-entity camera>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue" position="0, 0, -4"></a-entity>
    </a-scene>
  </body>
</html>

In this code snippet, I am using the cdn for aframe 0.7.0 but have also attempted 0.7.1 and master.

The cursor appears to "click" the cube once, changing its color. The view is unable to be moved in both desktop and VR mode. For example, in VR mode, when moving my head, the rectangle stays in the direct center of view.

Here is a live codepen.

How do I fix the code to allow me to be able to move the camera?

1
aframe

1 Answers

2
votes

You'll want to add the look-controls component to your camera:

<a-entity camera look-controls>