aframe-mouse-cursor-component - GitLite

KO | EN

gitlite — search

#javascript #python #golang #rust #linux #docker #macos #awesome #cli #awesome-list #pytorch #security #ios #mcp

aframe-mouse-cursor-component

(★ 136)

Mouse Cursor Component for A-Frame VR.

File Explorer

Download Latest Version (.zip)

- .gitkeep
- aframe-mouse-cursor-component.js
- aframe-mouse-cursor-component.min.js
- - index.html
- - index.html
- common.css
- example.gif
- index.html
- main.js
.babelrc
.gitignore
index.js
LICENSE
package.json
README.md
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/mayognaise/aframe-mouse-cursor-component

Downloads the entire project code from GitHub to your computer.

cd aframe-mouse-cursor-component

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm i -D aframe-mouse-cursor-component

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# A-Frame Mouse Cursor Component

> **This feature is now available in A-Frame v0.6.1 by setting `<a-scene cursor="rayOrigin: mouse">`.**

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

For detail, please check [cursor page](https://aframe.io/docs/components/cursor.html).

**[DEMO](https://mayognaise.github.io/aframe-mouse-cursor-component/index.html)**

![example](https://raw.githubusercontent.com/mayognaise/aframe-mouse-cursor-component/master/examples/example.gif)

## 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](https://mayognaise.github.io/aframe-mouse-cursor-component/basic/index.html).

## Usage

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

### Browser Installation

Install and use by directly including the [browser files](dist):

```html
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.5.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 look-controls mouse-cursor>
  </a-scene>
</body>
```

### NPM Installation

Install via NPM:

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

Then register and use.

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

### Contributions

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

### 0.5.1

- Add ‘mousedown’ and ‘mouseup’ event

### 0.5.0

- Now works accurately with scenes embedded in page

### 0.2.1

- 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