Note: This documentation is for the old 0.6.0 version of A-Frame. Check out the documentation for the current 1.0.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
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
click events. We use the name
mouse to mimic
traditional web development for now. Under the hood, the cursor component uses
capturing the closest visible intersected entity.
By default, the cursor is configured to be used in a gaze-based mode.
upEvents properties allows the cursor to work
with controllers. The laser-controls component automatically
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.
// Component to change to random color on click.
|downEvents||Array of additional events on the entity to listen to for triggering
|fuse||Whether cursor is fuse-based.||false on desktop, true on mobile|
|fuseTimeout||How long to wait (in milliseconds) before triggering a fuse-based click event.||1500|
|rayOrigin||Where the intersection ray is cast from (i.e.,entity or mouse)||entity|
|upEvents||Array of additional events on the entity to listen to for triggering
To further customize the cursor component, we configure the cursor’s dependency component, the raycaster component.
|click||Emitted on both cursor and intersected entity if a currently intersected entity is clicked (whether by mouse or by fuse).|
|fusing||Emitted on both cursor and intersected entity when fuse-based cursor starts counting down.|
|mousedown||Emitted on both cursor and intersected entity (if any) on mousedown on the canvas element.|
|mouseenter||Emitted on both cursor and intersected entity (if any) when cursor intersects with an entity.|
|mouseleave||Emitted on both cursor and intersected entity (if any) when cursor no longer intersects with previously intersected entity.|
|mouseup||Emitted on both cursor and intersected entity (if any) on mouseup on the canvas element.|
The cursor will add states to the cursor entity on certain events:
|cursor-fusing||Added when the cursor is fusing on another entity.|
|cursor-hovering||Added when the cursor is hovering over another entity.|
The cursor will add states to intersected entities on certain events:
|cursor-hovered||Added to the intersected entity when the cursor is hovering over it.|
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>
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.
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
<a-entity cursor="fuse: true; fuseTimeout: 500"
To play with an example of a cursor with visual feedback, check out the Cursor with Visual Feedback example on CodePen.