three-dragger

Drag three.js objects without modifying the original's position

Usage no npm install needed!

<script type="module">
  import threeDragger from 'https://cdn.skypack.dev/three-dragger';
</script>

README

three-dragger

npm version

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:

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