three-dragger

Drag three.js objects (including Group) like THREE.DragControls, but without modifying the original position.

Live demo available at here.

Installation

npm install --save three-dragger

The CDN build is also available on unpkg:

• unpkg.com/three-dragger@1/dist/three-dragger.umd.js
• unpkg.com/three-dragger@1/dist/three-dragger.umd.min.js

Usage

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.

update(objects)

Update the draggable objects.

dispose()

Remove all events handlers.

License

MIT