3D Manipulator for ThreeJs

https://www.npmjs.com/package/manipulator3d

NPM Install

npm install manipulator3d

Development Setup

git clone --depth=1 https://github.com/sketchpunklabs/manipulator3d
cd manipulator3d
npm install
npm run dev

Usage with attachment

import { Manipulator3D } from 'Manipulator3D';

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const cube = facedCube( null, 0.5 );
cube.position.set( 0, 1, 0 );
scene.add( cube );

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const man = new Manipulator3D( scene, camera, renderer );

// Hook into events to disable camera controller when user does a drag action
man.on( 'dragstart', ()=>{ orbitControl.enabled = false; } );
man.on( 'dragend', ()=>{   orbitControl.enabled = true; } );

// Hook into events to see the changes happen
// man.on( 'translate', e=>console.log( 'Translate', e.detail ) );
// man.on( 'rotate', e=>console.log( 'Rotate( Quat )', e.detail ) );
// man.on( 'scale', e=>console.log( 'Scale', e.detail ) );

// Turn on Control
man.setActive( true );

// Attach object to manipulate
man.attach( cube );

Usage of translation without attachment

import { Manipulator3D } from 'Manipulator3D';

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const man = new Manipulator3D( scene, camera, renderer );

// Hook into events to disable camera controller when user does a drag action
man.on( 'dragstart', ()=>{ orbitControl.enabled = false; } );
man.on( 'dragend', ()=>{   orbitControl.enabled = true; } );

// Hook into events to see the changes happen
man.on( 'translate', e=>console.log( 'Translate', e.detail ) );

man.setActive( true );  // Turn on Control
man.useRotate( false ); // Turn off Rotation
man.useScale( false );  // Turn off Scale