# threejs-mouse-tracker

> Track your mouse movement on a threejs object

Latest version **1.0.1** (published 2022-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install threejs-mouse-tracker
pnpm add threejs-mouse-tracker
yarn add threejs-mouse-tracker
bun add threejs-mouse-tracker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-10-05 |
| First published | 2022-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 151.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | lexical.eights-0k@icloud.com |
| Maintainers | ggwzrd |

## Links

- npm: https://www.npmjs.com/package/threejs-mouse-tracker
- Repository: https://github.com/ggwzrd/threejs-mouse-tracker
- Homepage: https://github.com/ggwzrd/threejs-mouse-tracker#readme
- Issues: https://github.com/ggwzrd/threejs-mouse-tracker/issues
- npm.io page: https://npm.io/package/threejs-mouse-tracker

## Dependencies (1)

- [three](https://npm.io/package/three.md) ^0.145.0

## Recent versions

- 1.0.1 (latest) — 2022-10-05
- 1.0.0 — 2022-10-04

## README

![threejs-mouse-tracker](./assets/mouse-tracker-header.png?raw=true "Screenshot while debugging the mouse tracking on a 3D plain")


# threejs-mouse-tracker

[![DeepScan grade](https://deepscan.io/api/teams/19163/projects/22510/branches/665920/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=19163&pid=22510&bid=665920)
![GitHub last commit](https://img.shields.io/github/last-commit/ggwzrd/threejs-mouse-tracker)
![npm bundle size](https://img.shields.io/bundlephobia/min/threejs-mouse-tracker)
![npm](https://img.shields.io/npm/v/threejs-mouse-tracker)
![NPM](https://img.shields.io/npm/l/threejs-mouse-tracker)

This package is made to track the mouse position within a three dimenional space using Three.js [Raycaster](https://threejs.org/docs/index.html?q=rayca#api/en/core/Raycaster).

- [threejs-mouse-tracker](#threejs-mouse-tracker)
  - [Install](#install)
    - [npm](#npm)
    - [yarn](#yarn)
  - [Getting started](#getting-started)
  - [Contributing](#contributing)
  - [Credits](#credits)
  - [License](#license)

## Install

### npm

```bash
  npm install threejs-mouse-tracker
```

### yarn

```bash
  yarn add threejs-mouse-tracker
```

## Getting started

All you need to start tracking  is the snippet below.

```js
import * as THREE from 'three'
import MouseTracker from 'threejs-mouse-tracker'

// prepare renderer, camera and scene

const wireframe = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(10, 10, 10, 10).rotateX(-Math.PI / 2),
  new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
  })
);

scene.add(wireframe);

const mouse = new MouseTracker({
  mesh: wireframe,
  camera,
  // tracker: (xyz) => console.log(xyz),
  debug: true
});

scene.add(mouse.object);

// render camera and scene using renderer
```

> Full example in [examples/plain.ts](./src/examples/plain.ts)

## Contributing

Consult [CONTRIBUTING.md](./CONTRIBUTING.md) to start contributing to threejs-mouse-tracker.

## Credits

[Yuri Artiukh](https://www.youtube.com/watch?v=o_bEveIFfoM) [aka [@akella](https://github.com/akella)]

## License

[The MIT License (MIT)](./LICENCE.txt)

---
_Source: https://npm.io/package/threejs-mouse-tracker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._