# three-dragcontrols

> three.js DragControls

Latest version **0.88.2** (published 2018-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install three-dragcontrols
pnpm add three-dragcontrols
yarn add three-dragcontrols
bun add three-dragcontrols
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.88.2 |
| Published | 2018-03-20 |
| First published | 2017-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | keqingrong |
| Maintainers | dearke |
| Keywords | three, three.js, 3d, camera, controls |

## Links

- npm: https://www.npmjs.com/package/three-dragcontrols
- Repository: https://github.com/keqingrong/three-dragcontrols
- Homepage: https://github.com/keqingrong/three-dragcontrols#readme
- Issues: https://github.com/keqingrong/three-dragcontrols/issues
- npm.io page: https://npm.io/package/three-dragcontrols

## Recent versions

- 0.88.2 (latest) — 2018-03-20
- 0.88.1 — 2017-11-17
- 0.88.0 — 2017-11-17
- 0.86.2 — 2017-07-11
- 0.86.1 — 2017-07-11
- 0.86.0 — 2017-07-10
- 0.0.1 — 2017-07-10

## README

# three-dragcontrols

## Installation

```bash
npm install three-dragcontrols
```

## Usage

```javascript
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh
} from 'three';
import DragControls from 'three-dragcontrols';

const scene = new Scene();
const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 1000;

const renderer = new WebGLRenderer({antialias: true});
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
document.body.appendChild(renderer.domElement);

const objects = [];
const geometry = new BoxGeometry(40, 40, 40);

for (let i = 0; i < 2; i++) {
  const object = new Mesh(geometry, new MeshBasicMaterial({color: Math.random() * 0xffffff}));
  object.position.x = Math.random() * 1000 - 500;
  object.position.y = Math.random() * 600 - 300;
  object.position.z = Math.random() * 800 - 400;
  object.rotation.x = Math.random() * 2 * Math.PI;
  object.rotation.y = Math.random() * 2 * Math.PI;
  object.rotation.z = Math.random() * 2 * Math.PI;
  object.scale.x = Math.random() * 2 + 1;
  object.scale.y = Math.random() * 2 + 1;
  object.scale.z = Math.random() * 2 + 1;
  scene.add(object);
  objects.push(object);
}

const dragControls = new DragControls(objects, camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();
```

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