refactored transform controlls and fixed editor controls safari bug

editor/js/Editor.js

@@ -12,6 +12,7 @@ var Editor = function () {
 
 		transformModeChanged: new SIGNALS.Signal(),
 		snapChanged: new SIGNALS.Signal(),
+		spaceChanged: new SIGNALS.Signal(),
 		rendererChanged: new SIGNALS.Signal(),
 
 		sceneGraphChanged: new SIGNALS.Signal(),

editor/js/Toolbar.js

@@ -43,9 +43,14 @@ var Toolbar = function ( editor ) {
 	buttons.add( snap );
 	buttons.add( new UI.Text( 'snap' ) );
 
+	var local = new UI.Checkbox( false ).onChange( update );
+	buttons.add( local );
+	buttons.add( new UI.Text( 'local' ) );
+
 	function update() {
 
 		signals.snapChanged.dispatch( snap.getValue() === true ? grid.getValue() : null );
+		signals.spaceChanged.dispatch( local.getValue() === true ? "local" : "world" );
 
 	}
 

editor/js/Viewport.js

@@ -45,11 +45,10 @@ var Viewport = function ( editor ) {
 
 		// TODO: Differentiate from transform hovers change and object transform change
 
-		signals.objectChanged.dispatch( editor.selected );
+		if (editor.selected) signals.objectChanged.dispatch( editor.selected );
 
 	} );
-	sceneHelpers.add( transformControls.gizmo );
-	transformControls.hide();
+	sceneHelpers.add( transformControls );
 
 	// fog
 
@@ -115,7 +114,7 @@ var Viewport = function ( editor ) {
 	    y = (event.clientY - rect.top) / rect.height;
 		onMouseUpPosition.set( x, y );
 
-		if ( onMouseDownPosition.distanceTo( onMouseUpPosition ) < 1 ) {
+		if ( onMouseDownPosition.distanceTo( onMouseUpPosition ) == 0 ) {
 
 			var intersects = getIntersects( event, objects );
 
@@ -183,19 +182,18 @@ var Viewport = function ( editor ) {
 	signals.transformModeChanged.add( function ( mode ) {
 
 		transformControls.setMode( mode );
-		render();
 
 	} );
 
 	signals.snapChanged.add( function ( dist ) {
 
-		transformControls.snapDist = dist;
+		transformControls.setSnap( dist );
 
 	} );
 
-	signals.snapChanged.add( function ( dist ) {
+	signals.spaceChanged.add( function ( space ) {
 
-		snapDist = dist;
+		transformControls.setSpace( space );
 
 	} );
 

examples/js/controls/EditorControls.js

@@ -23,6 +23,8 @@ THREE.EditorControls = function ( object, domElement ) {
 
 	var center = new THREE.Vector3();
 	var normalMatrix = new THREE.Matrix3();
+	var pointer = new THREE.Vector2();
+	var pointerOld = new THREE.Vector2();
 
 	// events
 
@@ -114,6 +116,8 @@ THREE.EditorControls = function ( object, domElement ) {
 
 		}
 
+		pointerOld.set( event.clientX, event.clientY );
+
 		domElement.addEventListener( 'mousemove', onMouseMove, false );
 		domElement.addEventListener( 'mouseup', onMouseUp, false );
 		domElement.addEventListener( 'mouseout', onMouseUp, false );
@@ -126,8 +130,10 @@ THREE.EditorControls = function ( object, domElement ) {
 
 		event.preventDefault();
 
-		var movementX = event.movementX || event.webkitMovementX || event.mozMovementX || event.oMovementX || 0;
-		var movementY = event.movementY || event.webkitMovementY || event.mozMovementY || event.oMovementY || 0;
+		pointer.set( event.clientX, event.clientY );
+
+		var movementX = pointer.x - pointerOld.x;
+		var movementY = pointer.y - pointerOld.y;
 
 		if ( state === STATE.ROTATE ) {
 
@@ -143,6 +149,8 @@ THREE.EditorControls = function ( object, domElement ) {
 
 		}
 
+		pointerOld.set( event.clientX, event.clientY );
+
 	}
 
 	function onMouseUp( event ) {

examples/misc_controls_transform.html

@@ -26,7 +26,7 @@
 
 		<div id="info">
 		"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
-		Press "W/E/R" twice to toggle world/local space
+		Press "Q" twice to toggle world/local space
 		</div>
 
 		<script src="../build/three.min.js"></script>
@@ -34,8 +34,7 @@
 
 		<script>
 
-			var camera, scene, renderer;
-			var controls = [];
+			var camera, scene, renderer, control;
 
 			init();
 			render();
@@ -50,40 +49,61 @@
 				//
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
-				camera.position.set( 1000, 1000, 1000 );
-				camera.lookAt( new THREE.Vector3( 0, 700, 0 ) );
+				camera.position.set( 1000, 500, 1000 );
+				camera.lookAt( new THREE.Vector3( 0, 200, 0 ) );
 
 				scene = new THREE.Scene();
 				scene.add( new THREE.GridHelper( 500, 100 ) );
 
+				var light = new THREE.DirectionalLight( 0xffffff, 2 );
+				light.position.set( 1, 1, 1 );
+				scene.add( light );
+
+
 				var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif', new THREE.UVMapping(), render );
 				texture.anisotropy = renderer.getMaxAnisotropy();
 
 				var geometry = new THREE.CubeGeometry( 200, 200, 200 );
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
-
-				var parent = scene;
-
-				for ( var i = 0; i < 4; i ++ ) {
+				var material = new THREE.MeshLambertMaterial( { map: texture } );
 
-					var mesh = new THREE.Mesh( geometry, material );
-					mesh.position.y = i > 0 ? 350 : 100;
-					parent.add( mesh );
+				control = new THREE.TransformControls( camera, renderer.domElement );
 
-					var control = new THREE.TransformControls( camera, renderer.domElement );
-					control.addEventListener( 'change', render );
-					control.attach( mesh );
-					control.scale = 0.65;
-					scene.add( control.gizmo );
+				control.addEventListener( 'change', render );
 
-					controls.push( control );
+				var mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
 
-					parent = mesh;
-
-				}
+				control.attach( mesh );
+				scene.add( control );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
+				window.addEventListener( 'keydown', function ( event ) {
+		            //console.log(event.which);
+		            switch ( event.keyCode ) {
+		              case 81: // Q
+		                control.setSpace( control.space == "local" ? "world" : "local" );
+		                break;
+		              case 87: // W
+		                control.setMode( "translate" );
+		                break;
+		              case 69: // E
+		                control.setMode( "rotate" );
+		                break;
+		              case 82: // R
+		                control.setMode( "scale" );
+		                break;
+					case 187:
+					case 107: // +,=,num+
+						control.setSize( control.size + 0.1 );
+						break;
+					case 189:
+					case 10: // -,_,num-
+						control.setSize( Math.max(control.size - 0.1, 0.1 ) );
+						break;
+		            }            
+        		});
+
 			}
 
 			function onWindowResize() {
@@ -99,11 +119,7 @@
 
 			function render() {
 
-				for ( var i = 0, j = controls.length; i < j; i ++ ) {
-
-					controls[ i ].update();
-
-				}
+				control.update();
 
 				renderer.render( scene, camera );