cursor

Note: This documentation is for the old 0.8.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The cursor component provides hover and click states for interaction on top of the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based cursor, and the laser-controls component configures the cursor for all controllers.

The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, mouseleave, and click events. We use the name mouse to mimic traditional web development for now. Under the hood, the cursor component uses the raycaster-intersection and raycaster-intersection-cleared events, capturing the closest visible intersected entity.

By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, the laser-controls component automatically configures these properties to work with most controllers..

To provide a shape or appearance to the cursor, we should apply either the geometry and material components or use the raycaster component’s showLine property to draw a line using the line component.

Example

For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

<a-entity camera look-controls>
  <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"></a-entity>

// Component to change to a sequential color on click.
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);
    });
  }
});

Properties

To further customize the cursor component, we configure the cursor’s dependency component, the raycaster component.

Events

Intersection Data

Relevant events will contain in the event detail intersection, which will contain {distance, point, face, faceIndex, indices, object} about specific data about the intersection:

this.el.addEventListener('click', function (evt) {
  console.log(evt.detail.intersection.point);
});

States

The cursor will add states to the cursor entity on certain events:

The cursor will add states to intersected entities on certain events:

Configuring the Cursor through the Raycaster Component

The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

<a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>

Fuse-Based Cursor

Also known as gaze-based cursor. If we set the cursor to be fuse-based, the cursor will trigger a click if the user gazes at an entity for a set amount of time. Imagine a laser strapped to the user’s head, and the laser extends out into the scene. If the user stares at an entity long enough (i.e., the fuseTimeout), then the cursor will trigger a click.

The advantage of fuse-based interactions for VR is that it does not require extra input devices other than the headset. The fuse-based cursor is primarily intended for Google Cardboard applications. The disadvantage of fuse-based interactions is that it requires the user to turn their head a lot.

Adding Visual Feedback

To add visual feedback to the cursor to show when the cursor is clicking or fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

<a-entity cursor="fuse: true;"
          position="0 0 -3"
          geometry="primitive: ring"
          material="color: black; shader: flat">
  <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
               fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
  <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
               fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>

To play with an example of a cursor with visual feedback, check out the Cursor with Visual Feedback example on CodePen.