# threejs-compass

> This is a Simple project created and maintained with the **just for fun** philosophy

Latest version **1.1.7** (published 2022-05-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install threejs-compass
pnpm add threejs-compass
yarn add threejs-compass
bun add threejs-compass
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2022-05-21 |
| First published | 2022-05-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | simCecca |
| Maintainers | simcecca |
| Keywords | three.js, zoom, compass, pan, drag |

## Links

- npm: https://www.npmjs.com/package/threejs-compass
- Repository: https://github.com/simCecca
- npm.io page: https://npm.io/package/threejs-compass

## Dependencies (3)

- [three](https://npm.io/package/three.md) ^0.139.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@types/three](https://npm.io/package/@types/three.md) ^0.139.0

## Recent versions

- 1.1.7 (latest) — 2022-05-21
- 1.1.6 — 2022-05-18
- 1.1.5 — 2022-05-18
- 1.1.4 — 2022-05-18
- 1.1.3 — 2022-05-17
- 1.1.2 — 2022-05-17
- 1.1.1 — 2022-05-17
- 1.0.1 — 2022-05-17
- 1.0.0 — 2022-05-17

## README

This is a Simple project created and maintained with the **just for fun** philosophy

You can find a medium article that describe the implementation here
https://medium.com/@ceccarellisimone1/zoom-and-pan-in-three-js-customly-simple-interactions-in-data-graph-visualization-26643a5d0287

# With this package you can
* zoom in your visualization in a specific point, using the pointer and the wheel (like google maps)
* drag the visualization (like google maps)
* translate the coordinates in 3 different spaces: the world, the real space of the canvas and the relative space of the canvas

# Usage

See the wiki section for a little documentation https://github.com/simCecca/threejs-compass/wiki

Install the library
```
npm install threejs-compass
```

Simply import the library
```
import Compass from "threejs-compass";
```

Set the events
```
const compass = new Compass(camera, renderer);
compass.setAllEvents();
```

In a real example
```
import Compass from "threejs-compass";

const main = () => {
  // threejs configuration, you can do what you you want
  const canvas = document.querySelector("#c");
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const fov = 30;
  const z = 300;
  const aspectRatio = width / height;

  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  ....
  ....
  // end threejs config
  
  const compass = new Compass(camera, renderer);
  compass.setAllEvents();
  ....
  ....
}

main();
```

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