added transform controls

replaced axis geometry with code
added rotation and scale controls
refactored
added local modes
changed default settings
added todo list

optimized and bug fixes

changed default settings

typo

hide intersection planes

refactored transformControls
added half-rings to rotation handles

editor/index.html

@@ -77,6 +77,7 @@
 		<script src="../examples/js/libs/system.min.js"></script>
 
 		<script src="../examples/js/controls/EditorControls.js"></script>
+		<script src="../examples/js/controls/TransformControls.js"></script>
 		<script src="../examples/js/loaders/BinaryLoader.js"></script>
 		<script src="../examples/js/loaders/ColladaLoader.js"></script>
 		<script src="../examples/js/loaders/OBJLoader.js"></script>

editor/js/ui/Viewport.js

@@ -25,8 +25,15 @@ var Viewport = function ( signals ) {
 	var grid = new THREE.GridHelper( 500, 25 );
 	sceneHelpers.add( grid );
 
-	var modifierAxis = new THREE.Vector3( 1, 1, 1 );
-	var snapDist = null;
+	//
+
+	var scene = new THREE.Scene();
+
+	var camera = new THREE.PerspectiveCamera( 50, container.dom.offsetWidth / container.dom.offsetHeight, 1, 5000 );
+	camera.position.set( 500, 250, 500 );
+	camera.lookAt( scene.position );
+
+	//
 
 	var selectionBox = new THREE.BoxHelper();
 	selectionBox.material.color.setHex( 0xffff00 );
@@ -35,20 +42,9 @@ var Viewport = function ( signals ) {
 	selectionBox.visible = false;
 	sceneHelpers.add( selectionBox );
 
-	var selectionAxis = new THREE.AxisHelper( 100 );
-	selectionAxis.material.depthTest = false;
-	selectionAxis.material.transparent = true;
-	selectionAxis.matrixAutoUpdate = false;
-	selectionAxis.visible = false;
-	sceneHelpers.add( selectionAxis );
-
-	//
-
-	var scene = new THREE.Scene();
-
-	var camera = new THREE.PerspectiveCamera( 50, container.dom.offsetWidth / container.dom.offsetHeight, 1, 5000 );
-	camera.position.set( 500, 250, 500 );
-	camera.lookAt( scene.position );
+	var transformControls = new THREE.TransformControls( camera, container.dom );
+	sceneHelpers.add( transformControls.gizmo );
+	transformControls.hide();
 
 	// fog
 
@@ -60,13 +56,8 @@ var Viewport = function ( signals ) {
 
 	// object picking
 
-	var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 5000, 5000 ) );
-	intersectionPlane.visible = false;
-	sceneHelpers.add( intersectionPlane );
-
 	var ray = new THREE.Raycaster();
 	var projector = new THREE.Projector();
-	var offset = new THREE.Vector3();
 
 	var selected = camera;
 
@@ -106,72 +97,21 @@ var Viewport = function ( signals ) {
 
 		onMouseDownPosition.set( event.layerX, event.layerY );
 
-		if ( event.button === 0 ) {
-
-			var intersects = getIntersects( event, objects );
-
-			if ( intersects.length > 0 ) {
-
-				var object = intersects[ 0 ].object;
-
-				if ( selected === object || selected === helpersToObjects[ object.id ] ) {
-
-					intersectionPlane.position.copy( selected.position );
-					intersectionPlane.lookAt( camera.position );
-					intersectionPlane.updateMatrixWorld();
-
-					var intersects = ray.intersectObject( intersectionPlane );
-
-					offset.copy( intersects[ 0 ].point ).sub( intersectionPlane.position );
-
-					document.addEventListener( 'mousemove', onMouseMove, false );
-
-					controls.enabled = false;
-
-				}
-
-			} else {
-
-				controls.enabled = true;
-
-			}
+		setTimeout( function(){ 
+			if ( transformControls.active ) controls.enabled = false;
+			else controls.enabled = true;
+		}, 10 );
 
-			document.addEventListener( 'mouseup', onMouseUp, false );
+		document.addEventListener( 'mousemove', onMouseMove, false );
+		document.addEventListener( 'mouseup', onMouseUp, false );
 
-		}
+		render();
 
 	};
 
 	var onMouseMove = function ( event ) {
 
-		onMouseMovePosition.set( event.layerX, event.layerY );
-
-		if ( onMouseDownPosition.distanceTo( onMouseUpPosition ) > 1 ) {
-
-			var intersects = getIntersects( event, intersectionPlane );
-
-			if ( intersects.length > 0 ) {
-
-				var point = intersects[ 0 ].point.sub( offset );
-
-				if (snapDist) {
-					point.x = Math.round( point.x / snapDist ) * snapDist;
-					point.y = Math.round( point.y / snapDist ) * snapDist;
-					point.z = Math.round( point.z / snapDist ) * snapDist;
-				}
-
-				selected.position.x = modifierAxis.x === 1 ? point.x : intersectionPlane.position.x;
-				selected.position.y = modifierAxis.y === 1 ? point.y : intersectionPlane.position.y;
-				selected.position.z = modifierAxis.z === 1 ? point.z : intersectionPlane.position.z;
-
-
-				signals.objectChanged.dispatch( selected );
-
-				render();
-
-			}
-
-		}
+		signals.objectChanged.dispatch( selected );
 
 	};
 
@@ -205,6 +145,8 @@ var Viewport = function ( signals ) {
 
 			}
 
+			controls.enabled = false;
+
 			render();
 
 		}
@@ -244,7 +186,13 @@ var Viewport = function ( signals ) {
 
 	signals.modifierAxisChanged.add( function ( axis ) {
 
-		modifierAxis.copy( axis );
+		transformControls.modifierAxis.copy( axis );
+
+	} );
+
+	signals.snapChanged.add( function ( dist ) {
+
+		transformControls.snapDist = dist;
 
 	} );
 
@@ -348,7 +296,7 @@ var Viewport = function ( signals ) {
 	signals.objectSelected.add( function ( object ) {
 
 		selectionBox.visible = false;
-		selectionAxis.visible = false;
+		transformControls.detatch();
 
 		if ( object !== null ) {
 
@@ -359,11 +307,10 @@ var Viewport = function ( signals ) {
 
 			}
 
-			selectionAxis.matrixWorld = object.matrixWorld;
-			selectionAxis.visible = true;
-
 			selected = object;
 
+			if ( !(selected instanceof THREE.PerspectiveCamera) ) transformControls.attatch(object);
+
 		}
 
 		render();
@@ -636,4 +583,4 @@ var Viewport = function ( signals ) {
 
 	return container;
 
-}
+}
\ No newline at end of file