A-Frame Mouse Cursor Component

> This feature is now available in A-Frame v0.6.1 by setting .

This is similar to cursor component besides the mouse behaves as cursor.

For detail, please check cursor page.

DEMO

!example

Properties

There is no property.

States

The mouse-cursor will add states to the cursor entity on certain events.

There is no hovering or hovered state for mobile.

| State Name | Description |
| -------- | ----------- |
| hovering | Added when the cursor is hovering over another entity. |

The cursor will add states to the target entity on certain events.

| State Name | Description |
| -------- | ----------- |
| hovered | Added when target entity is being hovered by the cursor. |

Events

There is no mouseenter or mouseleave events but click event for mobile.

| Event Name | Description |
| -------- | ----------- |
| click | Triggered when an entity is clicked. |
| mouseenter | Triggered on mouseenter of the canvas. |
| mouseleave | Triggered on mouseleave of the canvas. |
| mousedown | Triggered on mousedown of the canvas. |
| mouseup | Triggered on mouseup of the canvas. |

For events, please check demo page.

Usage

The mouse-cursor component is usually used alongside the [camera component][components-camera].

$3

Install and use by directly including the browser files:

``html











`

$3

Install via NPM:

`bash
npm i -D aframe-mouse-cursor-component
`

Then register and use.

`js
import 'aframe'
import 'aframe-mouse-cursor-component'
`

$3

If you want to work on this component, take a fork of this branch, and submit a PR back.

* To dev, run npm run dev in your terminal, and check your code at http://localhost:8000
* To build (prior to PR) run npm run build

Change log

$3

- Add ‘mousedown’ and ‘mouseup’ event

$3

- Now works accurately with scenes embedded in page

$3

- Now mouse cursor works in stereo mode on both desktop/mobile
- click` event won't be fired when mouse moves a lot after mouse down