three-js-transform-handler
This class is a 3D representation of a transformation handler. It does not handle events on it, only the 3D drawing.
Setup
Assuming that npm and node are already installed.
Clone the current repository. Then in the repository folder :
npm install
This should install all required dependencies for build and development.
Then to launch the example :
npm run build
npm start
Usage
The class is just a special THREE.Object3D with a hierarchy to create a set of handles. The setActiveHandle function will change the style of the given handle. The setFromObject will set the handle according to the given object transformation.
This class is not connected to any event handler, so to implement an actual Transform widget, you need to pick on the object and act depending on the element under the mouse.
Distribution
Distribution files can be found in ./dist/browser, to be included in your HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>THREE TransformObject3D</title>
</head>
<body>
<!-- Don't forget to include THREE, its is not shipped with the lib -->
<script src="three.js"></script>
<script src="dist/browser/three-js-view-cube.js"></script>
<script>
alert('Checking definition of TransformObject3D : ' + THREE.TransformObject3D !== undefined);
var t = new THREE.TransformObject3D();
</script>
</body>
</html>
Repository Commands
Build:
npm run build
Will update the browser build in dist.
Browser Dependencies
In browser, only THREE is required.