https://github.com/keqingrong/three-dragger

Drag three.js objects like THREE.DragControls
https://github.com/keqingrong/three-dragger

dnd drag drag-and-drop threejs

Last synced: 3 months ago
JSON representation

Drag three.js objects like THREE.DragControls

• Host: GitHub
• URL: https://github.com/keqingrong/three-dragger
• Owner: keqingrong
• License: mit
• Created: 2018-02-18T08:29:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-04-13T15:21:00.000Z (almost 4 years ago)
• Last Synced: 2024-11-04T06:26:04.375Z (3 months ago)
• Topics: dnd, drag, drag-and-drop, threejs
• Language: JavaScript
• Homepage:
• Size: 20.5 KB
• Stars: 7
• Watchers: 4
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# three-dragger

[![npm version](https://img.shields.io/npm/v/three-dragger.svg)](https://www.npmjs.com/package/three-dragger)

> Drag three.js objects (including [Group](https://threejs.org/docs/#api/en/objects/Group)) like [THREE.DragControls](https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DragControls.js), but without modifying the original position.

Live demo available at [here](https://keqingrong.github.io/three-dragger/example/).

## Installation

```sh

npm install --save three-dragger

```

The CDN build is also available on unpkg:

- [unpkg.com/three-dragger@1/dist/three-dragger.umd.js](https://unpkg.com/three-dragger@1/dist/three-dragger.umd.js)

- [unpkg.com/three-dragger@1/dist/three-dragger.umd.min.js](https://unpkg.com/three-dragger@1/dist/three-dragger.umd.min.js)

## Usage

```js

import ThreeDragger from 'three-dragger';

const draggableObjects = [];

const mouseDragger = new ThreeDragger(draggableObjects, camera, renderer.domElement);

mouseDragger.on('dragstart', function (data) {

  // Remember to disable other Controls, such as OrbitControls or TrackballControls

});

mouseDragger.on('drag', function (data) {

  const { target, position } = data;

  target.position.set(position.x, position.y, position.z);

});

mouseDragger.on('dragend', function (data) {

  // Remember to enable other Controls, such as OrbitControls or TrackballControls

});

```

## API

### enabled

Enable or disable the dragger. The default is `true`.

### on(eventName, callback)

Handle with the drag events:

- `dragstart`

- `drag`

- `dragend`

#### callback(data)

- `data.target`: The dragged object.

- `data.mouse`: The normalized device coordinates of the mouse.

- `data.position`: The latest world coordinates of the mouse.

- `data.event`: The original DOM event.

### removeListener()

See [EventEmitter3](https://github.com/primus/EventEmitter3).

### update(objects)

Update the draggable objects.

### dispose()

Remove all events handlers.

## License

MIT