Fixed scaling implementation in TransformControls.

Fixes #10916, #9312, #5489 and #5379

Fixed rotation at negative scale.

Merged TransformControls into one file and updated examples.

Added rotation snapping in local and world mode.

Cleaning up transform controls math and variables.

editor/js/Viewport.js

@@ -92,7 +92,7 @@ var Viewport = function ( editor ) {
 
 		if ( object !== undefined ) {
 
-			switch ( transformControls.getMode() ) {
+			switch ( transformControls.mode ) {
 
 				case 'translate':
 
@@ -269,7 +269,6 @@ var Viewport = function ( editor ) {
 	var controls = new THREE.EditorControls( camera, container.dom );
 	controls.addEventListener( 'change', function () {
 
-		transformControls.update();
 		signals.cameraChanged.dispatch( camera );
 
 	} );
@@ -285,19 +284,19 @@ var Viewport = function ( editor ) {
 
 	signals.transformModeChanged.add( function ( mode ) {
 
-		transformControls.setMode( mode );
+		transformControls.mode = mode;
 
 	} );
 
 	signals.snapChanged.add( function ( dist ) {
 
-		transformControls.setTranslationSnap( dist );
+		transformControls.translationSnap = dist;
 
 	} );
 
 	signals.spaceChanged.add( function ( space ) {
 
-		transformControls.setSpace( space );
+		transformControls.space = space;
 
 	} );
 
@@ -391,7 +390,6 @@ var Viewport = function ( editor ) {
 		if ( editor.selected === object ) {
 
 			selectionBox.setFromObject( object );
-			transformControls.update();
 
 		}
 

examples/js/controls/TransformControlsPlane.js

-/**
- * @author arodic / https://github.com/arodic
- */
-
-THREE.TransformControlsPlane = function () {
-
-  'use strict';
-
-  THREE.Mesh.call( this,
-    new THREE.PlaneBufferGeometry( 1000, 1000, 2, 2 ),
-    new THREE.MeshBasicMaterial( { visible: false, wireframe: true, side: THREE.DoubleSide, transparent: true, opacity: 0.1 } )
-  );
-
-	this.type = 'TransformControlsPlane';
-
-  var unitX = new THREE.Vector3( 1, 0, 0 );
-  var unitY = new THREE.Vector3( 0, 1, 0 );
-  var unitZ = new THREE.Vector3( 0, 0, 1 );
-
-	var dirVector = new THREE.Vector3();
-	var alignVector = new THREE.Vector3();
-  var tempMatrix = new THREE.Matrix4();
-  var camRotation = new THREE.Euler();
-
-  this.update = function( rotation, eye ) {
-
-    var axis = this.parent.axis;
-    var mode = this.parent.mode;
-
-    unitX.set( 1, 0, 0 ).applyEuler( rotation );
-    unitY.set( 0, 1, 0 ).applyEuler( rotation );
-    unitZ.set( 0, 0, 1 ).applyEuler( rotation );
-
-    alignVector.copy( unitY );
-
-    switch ( mode ) {
-      case 'translate':
-      case 'scale':
-      switch ( axis ) {
-        case 'X':
-          alignVector.copy( eye ).cross( unitX );
-          dirVector.copy( unitX ).cross( alignVector );
-          break;
-        case 'Y':
-          alignVector.copy( eye ).cross( unitY );
-          dirVector.copy( unitY ).cross( alignVector );
-          break;
-        case 'Z':
-          alignVector.copy( eye ).cross( unitZ );
-          dirVector.copy( unitZ ).cross( alignVector );
-          break;
-        case 'XY':
-          dirVector.copy( unitZ );
-          break;
-        case 'YZ':
-          dirVector.copy( unitX );
-          break;
-        case 'XZ':
-          dirVector.copy( unitY );
-          break;
-        case 'XYZ':
-        case 'E':
-          dirVector.set( 0,0,0 );
-          break;
-        }
-        break;
-      case 'rotate':
-      default:
-        switch ( axis ) {
-          // case 'X':
-          //   dirVector.copy( unitX );
-          //   break;
-          // case 'Y':
-          //   dirVector.copy( unitY );
-          //   break;
-          // case 'Z':
-          //   dirVector.copy( unitZ );
-          //   break;
-          default:
-            dirVector.set( 0,0,0 );
-            break;
-        }
-        break;
-    }
-
-    if ( dirVector.length() === 0 ) {
-
-      var camRotation = new THREE.Euler();
-    	// camRotation.setFromRotationMatrix( _tempMatrix.extractRotation( camera.matrixWorld ) );
-    	camRotation.setFromRotationMatrix( this.parent.camera.matrixWorld );
-      this.quaternion.setFromEuler( camRotation );
-
-    } else {
-
-      tempMatrix.lookAt( this.position, dirVector, alignVector );
-
-      this.quaternion.setFromRotationMatrix( tempMatrix );
-
-    }
-
-    this.updateMatrixWorld();
-
-  };
-
-};
-
-THREE.TransformControlsPlane.prototype = Object.assign( Object.create( THREE.Mesh.prototype ), {
-
-  constructor: THREE.TransformControlsPlane,
-
-  isTransformControlsPlane: true
-
-} );

examples/misc_animation_authoring.html

@@ -87,34 +87,34 @@
 					switch ( event.keyCode ) {
 
 						case 81: // Q
-							control.setSpace( control.space === "local" ? "world" : "local" );
+							control.space = control.space === "local" ? "world" : "local";
 							break;
 
 						case 17: // Ctrl
-							control.setTranslationSnap( 100 );
-							control.setRotationSnap( THREE.Math.degToRad( 15 ) );
+							control.translationSnap = 100;
+							control.rotationSnap = THREE.Math.degToRad( 15 );
 							break;
 
 						case 87: // W
-							control.setMode( "translate" );
+							control.mode = "translate";
 							break;
 
 						case 69: // E
-							control.setMode( "rotate" );
+							control.mode = "rotate";
 							break;
 
 						case 82: // R
-							control.setMode( "scale" );
+							control.mode = "scale";
 							break;
 
 						case 187:
 						case 107: // +, =, num+
-							control.setSize( control.size + 0.1 );
+							control.size = control.size + 0.1;
 							break;
 
 						case 189:
 						case 109: // -, _, num-
-							control.setSize( Math.max( control.size - 0.1, 0.1 ) );
+							control.size = Math.max( control.size - 0.1, 0.1 );
 							break;
 
 					}
@@ -126,8 +126,8 @@
 					switch ( event.keyCode ) {
 
 						case 17: // Ctrl
-							control.setTranslationSnap( null );
-							control.setRotationSnap( null );
+							control.translationSnap = null;
+							control.rotationSnap = null;
 							break;
 
 					}
@@ -170,8 +170,6 @@
 
 			function render() {
 
-				control.update();
-
 				renderer.render( scene, camera );
 
 			}

examples/misc_controls_transform.html

@@ -31,10 +31,7 @@
 		</div>
 
 		<script src="../build/three.js"></script>
-		<script src="js/controls/EditorControls.js"></script>
 		<script src="js/controls/TransformControls.js"></script>
-		<script src="js/controls/TransformControlsPlane.js"></script>
-		<script src="js/controls/TransformControlsGizmo.js"></script>
 
 		<script>
 
@@ -70,21 +67,17 @@
 				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 				var material = new THREE.MeshLambertMaterial( { map: texture } );
 
+				var group = new THREE.Group();
+				scene.add( group );
 
 				var mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
 
-				var control2 = new THREE.EditorControls( camera, renderer.domElement );
-				control2.addEventListener( 'change', render );
+				scene.add( mesh );
 
 				control = new THREE.TransformControls( camera, renderer.domElement );
-				control.addEventListener( 'change', function () {
-					control2.enabled = !control.dragging;
-					render();
-				} );
-				control.mode = "scale";
-				// control.space = "local";
-				mesh.rotation.set( 1, -2, -2 );
+				control.addEventListener( 'change', render );
+				control.mode = 'rotate'
+				control.space = 'local'
 
 				control.attach( mesh );
 				scene.add( control );
@@ -101,7 +94,7 @@
 
 						case 16: // Shift
 							control.translationSnap = 100;
-							control.rotationSnap = THREE.Math.degToRad( 15 );
+							control.rotationSnap = THREE.Math.degToRad( 45 );
 							break;
 
 						case 87: // W

examples/webgl_geometry_spline_editor.html

@@ -414,7 +414,6 @@
 				requestAnimationFrame( animate );
 				render();
 				stats.update();
-				transformControl.update();
 
 			}