# @0b5vr/tweakpane-plugin-rotation

> 3D rotation input plugin for Tweakpane

Latest version **0.2.0** (published 2023-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @0b5vr/tweakpane-plugin-rotation
pnpm add @0b5vr/tweakpane-plugin-rotation
yarn add @0b5vr/tweakpane-plugin-rotation
bun add @0b5vr/tweakpane-plugin-rotation
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-11-09 |
| First published | 2022-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 431.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 0b5vr |
| Maintainers | 0b5vr |

## Links

- npm: https://www.npmjs.com/package/@0b5vr/tweakpane-plugin-rotation
- npm.io page: https://npm.io/package/@0b5vr/tweakpane-plugin-rotation

## Recent versions

- 0.2.0 (latest) — 2023-11-09
- 0.1.1 — 2022-02-21
- 0.1.0 — 2022-02-06
- 0.0.1 — 2022-02-03

## README

# `@0b5vr/tweakpane-plugin-rotation`

[![npm](https://img.shields.io/npm/v/@0b5vr/tweakpane-plugin-rotation?logo=npm&style=flat-square)](https://www.npmjs.com/package/@0b5vr/tweakpane-plugin-rotation)

Rotation input plugin for Tweakpane

![@0b5vr/tweakpane-plugin-rotation, Rotation input plugin for tweakpane. A working screenshot of the plugin on the right](https://github.com/0b5vr/tweakpane-plugin-rotation/raw/dev/readme-images/rotation.png)

[Sandbox](https://0b5vr.github.io/tweakpane-plugin-rotation)

```html
<script type="module">
  import * as Tweakpane from 'https://unpkg.com/tweakpane@4.0.1/dist/tweakpane.js';
  import * as TweakpaneRotationInputPlugin from './tweakpane-plugin-rotation.js';

  const pane = new Tweakpane.Pane();

  pane.registerPlugin(TweakpaneRotationInputPlugin);

  const params = {
    euler: { x: 0.0, y: 0.0, z: 0.0 },
    quat: { x: 0.0, y: 0.0, z: 0.0, w: 1.0 },
  };

  // euler
  const guiEuler = pane.addBinding(params, 'euler', {
    view: 'rotation',
    rotationMode: 'euler',
    order: 'XYZ', // Extrinsic rotation order. optional, 'XYZ' by default
    unit: 'deg', // or 'rad' or 'turn'. optional, 'rad' by default
  });

  // quaternion
  const guiQuat = pane.addBinding(params, 'quat', {
    view: 'rotation',
    rotationMode: 'quaternion', // optional, 'quaternion' by default
    picker: 'inline', // or 'popup'. optional, 'popup' by default
    expanded: true, // optional, false by default
  });

  guiEuler.on('change', ({ value }) => {
    console.log(value); // do something
  });
</script>
```

---
_Source: https://npm.io/package/@0b5vr/tweakpane-plugin-rotation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._