This is similar to cursor component besides the mouse behaves as cursor.
For detail, please check cursor page.
There is no property.
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. |
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. |
For events, please check demo page.
The mouse-cursor component is usually used alongside the [camera component][components-camera].
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity camera mouse-cursor>
</a-scene>
</body>Install via NPM:
npm i -D aframe-mouse-cursor-componentThen register and use.
import 'aframe'
import 'aframe-mouse-cursor-component'- Now mouse cursor works in stereo mode on both desktop/mobile
clickevent won't be fired when mouse moves a lot after mouse down