Three-js-transform-handler NPM

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>