EditorControls and TransformControls clean up.

examples/js/controls/EditorControls.js

@@ -7,7 +7,7 @@
 
 THREE.EditorControls = function ( object, domElement ) {
 
-	var domElement = ( domElement !== undefined ) ? domElement : document;
+	domElement = ( domElement !== undefined ) ? domElement : document;
 
 	// API
 

examples/js/controls/TransformControls.js

@@ -20,9 +20,9 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 	this.scale = 1;
 
 	this.snapDist = null;
-  this.modifierAxis = new THREE.Vector3( 1, 1, 1 );
-  this.gizmo = new THREE.Object3D();
-	
+	this.modifierAxis = new THREE.Vector3( 1, 1, 1 );
+	this.gizmo = new THREE.Object3D();
+
 	var scope = this;
 
 	var showPickers = false; // debug
@@ -40,7 +40,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 	var lookAtMatrix = new THREE.Matrix4();
 	var eye = new THREE.Vector3()
-	
+
 	var tempMatrix = new THREE.Matrix4();
 	var tempVector = new THREE.Vector3();
 	var tempQuaternion = new THREE.Quaternion();
@@ -125,7 +125,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		var magenta = [1,0,1,0.2];
 		var yellow = [1,1,0,0.2];
 
-		var mesh;
+		var geometry, mesh;
 
 		// line axes
 
@@ -151,22 +151,24 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		displayAxes['translate'].add( mesh );
 		pickerAxes['translate'].add( mesh.clone() );
 
-		mesh = new THREE.Mesh( new THREE.PlaneGeometry( 0.2, 0.2 ), HandleMaterial( yellow ) );
+		geometry = new THREE.PlaneGeometry( 0.2, 0.2 );
+
+		mesh = new THREE.Mesh( geometry, HandleMaterial( yellow ) );
 		mesh.position.set( 0.1, 0.1, 0 );
 		bakeTransformations( mesh );
 		mesh.name = 'TXY';
 		displayAxes['translate'].add( mesh );
 		pickerAxes['translate'].add( mesh.clone() );
 
-		mesh = new THREE.Mesh( new THREE.PlaneGeometry( 0.2, 0.2 ), HandleMaterial( cyan ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( cyan ) );
 		mesh.position.set( 0, 0.1, 0.1 );
 		mesh.rotation.y = Math.PI/2;
 		bakeTransformations( mesh );
 		mesh.name = 'TYZ';
 		displayAxes['translate'].add( mesh );
 		pickerAxes['translate'].add( mesh.clone() );
-		
-		mesh = new THREE.Mesh( new THREE.PlaneGeometry( 0.2, 0.2 ), HandleMaterial( magenta ) );
+
+		mesh = new THREE.Mesh( geometry, HandleMaterial( magenta ) );
 		mesh.position.set( 0.1, 0, 0.1 );
 		mesh.rotation.x = Math.PI/2;
 		bakeTransformations( mesh );
@@ -174,40 +176,44 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		displayAxes['translate'].add( mesh );
 		pickerAxes['translate'].add( mesh.clone() );
 
-		mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0, 0.05, 0.2, 4, 1, true ), HandleMaterial( red ) );
+		geometry = new THREE.CylinderGeometry( 0, 0.05, 0.2, 4, 1, true );
+
+		mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
 		mesh.position.x = 0.9;
 		mesh.rotation.z = -Math.PI/2;
 		bakeTransformations( mesh );
 		mesh.name = 'TX';
 		displayAxes['translate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0, 0.05, 0.2, 4, 1, true ), HandleMaterial( green ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( green ) );
 		mesh.position.y = 0.9;
 		bakeTransformations( mesh );
 		mesh.name = 'TY';
 		displayAxes['translate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0, 0.05, 0.2, 4, 1, true ), HandleMaterial( blue ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( blue ) );
 		mesh.position.z = 0.9;
 		mesh.rotation.x = Math.PI/2;
 		bakeTransformations( mesh );
 		mesh.name = 'TZ';
 		displayAxes['translate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0.04, 0.04, 0.8, 4, 1, false ), HandleMaterial( red ) );
+		geometry = new THREE.CylinderGeometry( 0.04, 0.04, 0.8, 4, 1, false );
+
+		mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
 		mesh.position.x = 0.6;
 		mesh.rotation.z = -Math.PI/2;
 		bakeTransformations( mesh );
 		mesh.name = 'TX';
 		pickerAxes['translate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0.04, 0.04, 0.8, 4, 1, false ), HandleMaterial( green ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( green ) );
 		mesh.position.y = 0.6;
 		bakeTransformations( mesh );
 		mesh.name = 'TY';
 		pickerAxes['translate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0.04, 0.04, 0.8, 4, 1, false ), HandleMaterial( blue ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( blue ) );
 		mesh.position.z = 0.6;
 		mesh.rotation.x = Math.PI/2;
 		bakeTransformations( mesh );
@@ -216,26 +222,28 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 		// scale manipulators
 
-		mesh = new THREE.Mesh( new THREE.CubeGeometry( 0.1, 0.1, 0.1 ), HandleMaterial( white ) );
+		geometry = new THREE.CubeGeometry( 0.1, 0.1, 0.1 );
+
+		mesh = new THREE.Mesh( geometry, HandleMaterial( white ) );
 		mesh.name = 'SXYZ';
 		displayAxes['scale'].add( mesh );
 		pickerAxes['scale'].add( mesh.clone() );
 
-		mesh = new THREE.Mesh( new THREE.CubeGeometry( 0.1, 0.1, 0.1 ), HandleMaterial( red ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
 		mesh.position.set( 1, 0, 0 );
 		bakeTransformations( mesh );
 		mesh.name = 'SX';
 		displayAxes['scale'].add( mesh );
 		pickerAxes['scale'].add( mesh.clone() );
 
-		mesh = new THREE.Mesh( new THREE.CubeGeometry( 0.1, 0.1, 0.1 ), HandleMaterial( green ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( green ) );
 		mesh.position.set( 0, 1, 0 );
 		bakeTransformations( mesh );
 		mesh.name = 'SY';
 		displayAxes['scale'].add( mesh );
 		pickerAxes['scale'].add( mesh.clone() );
 
-		mesh = new THREE.Mesh( new THREE.CubeGeometry( 0.1, 0.1, 0.1 ), HandleMaterial( blue ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( blue ) );
 		mesh.position.set( 0, 0, 1 );
 		bakeTransformations( mesh );
 		mesh.name = 'SZ';
@@ -244,9 +252,9 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 		// rotate manipulators
 
-		var Circle = function( radius, facing, arc ) {
-			
-			var geometry = new THREE.Geometry();
+		var Circle = function ( radius, facing, arc ) {
+
+			geometry = new THREE.Geometry();
 			arc = arc ? arc : 1;
 			for ( var i = 0; i <= 64 * arc; ++i ) {
 				if ( facing == 'x' ) geometry.vertices.push( new THREE.Vector3( 0, Math.cos( i / 32 * Math.PI ), Math.sin( i / 32 * Math.PI ) ).multiplyScalar(radius) );
@@ -277,21 +285,23 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		mesh.name = 'RE';
 		displayAxes['rotate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.TorusGeometry( 1, 0.05, 4, 6, Math.PI ), HandleMaterial( cyan ) );
+		geometry = new THREE.TorusGeometry( 1, 0.05, 4, 6, Math.PI );
+
+		mesh = new THREE.Mesh( geometry, HandleMaterial( cyan ) );
 		mesh.rotation.z = -Math.PI/2;
 		mesh.rotation.y = -Math.PI/2;
 		bakeTransformations( mesh );
 		mesh.name = 'RX';
 		pickerAxes['rotate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.TorusGeometry( 1, 0.05, 4, 6, Math.PI ), HandleMaterial( magenta ) );
-	  mesh.rotation.z = Math.PI;
+		mesh = new THREE.Mesh( geometry, HandleMaterial( magenta ) );
+		mesh.rotation.z = Math.PI;
 		mesh.rotation.x = -Math.PI/2;
 		bakeTransformations( mesh );
 		mesh.name = 'RY';
 		pickerAxes['rotate'].add( mesh );
 
-		mesh = new THREE.Mesh( new THREE.TorusGeometry( 1, 0.05, 4, 6, Math.PI ), HandleMaterial( yellow ) );
+		mesh = new THREE.Mesh( geometry, HandleMaterial( yellow ) );
 		mesh.rotation.z = -Math.PI/2;
 		bakeTransformations( mesh );
 		mesh.name = 'RZ';
@@ -311,7 +321,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 	// intersection planes
 	{
-		
+
 		var planes = new THREE.Object3D();
 		this.gizmo.add(planes);
 
@@ -333,26 +343,26 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 	}
 
 
-  this.attatch = function ( object ) {
+	this.attatch = function ( object ) {
 
-  	this.object = object;
+		this.object = object;
 	 	this.updateMode();
-		
+
 		this.domElement.addEventListener( 'mousedown', onMouseDown, false );
 		document.addEventListener( 'keydown', onKeyDown, false );
 
-  }
+	}
 
-  this.detatch = function ( object ) {
+	this.detatch = function ( object ) {
 
 	 	this.hide();
 
 		this.domElement.removeEventListener( 'mousedown', onMouseDown, false );
 		document.removeEventListener( 'keydown', onKeyDown, false );
 
-  }
+	}
 
-  this.updateGizmo = function() {
+	this.updateGizmo = function() {
 
 		this.object.updateMatrixWorld();
 		worldPosition.getPositionFromMatrix( this.object.matrixWorld );
@@ -367,13 +377,14 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		this.gizmo.scale.set( scale, scale, scale );
 
 		for ( var i in this.gizmo.children ) {
+
 			for ( var j in this.gizmo.children[i].children ) {
 
 				object = this.gizmo.children[i].children[j];
 				name = object.name;
 
 				if ( name.search('E') != -1 ){
-					
+
 					lookAtMatrix.lookAt( camPosition, worldPosition, tempVector.set( 0, 1, 0 ));
 					object.rotation.setEulerFromRotationMatrix( lookAtMatrix );
 
@@ -392,21 +403,21 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 							if ( name == 'RX' ) {
 								quaternionX.setFromAxisAngle( unitX, Math.atan2( -eye.y, eye.z ) );
-							  tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
+								tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 							}
 
 							if ( name == 'RY' ) {
 								quaternionY.setFromAxisAngle( unitY, Math.atan2( eye.x, eye.z ) );
-							  tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
+								tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
 							}
 
 							if ( name == 'RZ' ) {
 								quaternionZ.setFromAxisAngle( unitZ, Math.atan2( eye.y, eye.x ) );
-							  tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
+								tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 							}
-						
+
 						}
-						
+
 						object.rotation.setEulerFromQuaternion( tempQuaternion );
 
 					} else if ( this.space == 'world' ) {
@@ -434,10 +445,10 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		}
 
 		this.callback();
- 
-  }
 
-  this.hide = function () {
+	}
+
+	this.hide = function () {
 
 	 	for ( var i in displayAxes ) {
 
@@ -459,79 +470,79 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 	 	}
 
-  }
+	}
 
-  this.updateMode = function() {
+	this.updateMode = function() {
 
-  	this.hide();
+		this.hide();
 
-  	if ( scope.mode == 'scale' ) scope.space = 'local';
+		if ( scope.mode == 'scale' ) scope.space = 'local';
 
 	 	for ( var i in displayAxes[this.mode].children ) {
 
  			displayAxes[this.mode].children[i].visible = true;
-	 		
+
 	 	}
 
 	 	for ( var i in pickerAxes[this.mode].children ) {
 
  			pickerAxes[this.mode].children[i].visible = showPickers;
-	 		
+
 	 	}
 
 	 	scope.updateGizmo();
 
-  }
+	}
 
-  this.setIntersectionPlane = function () {
+	this.setIntersectionPlane = function () {
 
-  	if ( isActive("X") || isActive("Y") ) {
+		if ( isActive("X") || isActive("Y") ) {
 
-  		currentPlane = 'XY';
+			currentPlane = 'XY';
 
-  	} 
+		}
 
-  	if ( isActive("Z") ) {
+		if ( isActive("Z") ) {
 
-  		currentPlane = 'YZ';
+			currentPlane = 'YZ';
 
-  	}
+		}
 
-  	if ( isActive("XZ") ) {
+		if ( isActive("XZ") ) {
 
-  		currentPlane = 'XZ';
+			currentPlane = 'XZ';
 
-  	} 
+		}
 
-  	if ( isActive("XYZ") || isActive("E") ) {
+		if ( isActive("XYZ") || isActive("E") ) {
 
-  		currentPlane = 'XYZE';
+			currentPlane = 'XYZE';
 
-  	}
+		}
 
-   	if ( isActive("RX") ) {
+	 	if ( isActive("RX") ) {
 
-  		currentPlane = 'YZ';
+			currentPlane = 'YZ';
 
-  	}
+		}
 
-  	if ( isActive("RY") ) {
+		if ( isActive("RY") ) {
 
-  		currentPlane = 'XZ';
+			currentPlane = 'XZ';
 
-  	} 
+		} 
 
-  	if ( isActive("RZ") ) {
+		if ( isActive("RZ") ) {
 
-  		currentPlane = 'XY';
+			currentPlane = 'XY';
 
-  	}
+		}
 
-  	scope.updateGizmo();
+		scope.updateGizmo();
 
-  }
+	}
 
-  function onMouseDown( event ) {
+	function onMouseDown( event ) {
 
 		event.preventDefault();
 
@@ -555,14 +566,14 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 				if ( planeIntersect ) {
 
-				  oldPosition.copy( scope.object.position );
-				  oldScale.copy( scope.object.scale );
+					oldPosition.copy( scope.object.position );
+					oldScale.copy( scope.object.scale );
 
-			    oldRotationMatrix.extractRotation( scope.object.matrix );
-			    worldRotationMatrix.extractRotation( scope.object.matrixWorld );
+					oldRotationMatrix.extractRotation( scope.object.matrix );
+					worldRotationMatrix.extractRotation( scope.object.matrixWorld );
 
-			    parentRotationMatrix.extractRotation( scope.object.parent.matrixWorld );
-			    parentScale.getScaleFromMatrix( tempMatrix.getInverse( scope.object.parent.matrixWorld ) );
+					parentRotationMatrix.extractRotation( scope.object.parent.matrixWorld );
+					parentScale.getScaleFromMatrix( tempMatrix.getInverse( scope.object.parent.matrixWorld ) );
 
 					offset.copy( planeIntersect.point );
 
@@ -589,7 +600,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 				point.copy( planeIntersect.point );
 
 				if ( ( scope.mode == 'translate' ) && isActive("T") ) {
-		
+
 					point.sub( offset );
 					point.multiply(parentScale);
 
@@ -619,11 +630,11 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 						scope.object.position.copy( oldPosition );
 						scope.object.position.add( point );
-						
+
 						if ( scope.snapDist ) {
 							if ( isActive("X") ) scope.object.position.x = Math.round( scope.object.position.x / scope.snapDist ) * scope.snapDist;
-			        if ( isActive("Y") ) scope.object.position.y = Math.round( scope.object.position.y / scope.snapDist ) * scope.snapDist;
-			        if ( isActive("Z") ) scope.object.position.z = Math.round( scope.object.position.z / scope.snapDist ) * scope.snapDist;
+							if ( isActive("Y") ) scope.object.position.y = Math.round( scope.object.position.y / scope.snapDist ) * scope.snapDist;
+							if ( isActive("Z") ) scope.object.position.z = Math.round( scope.object.position.z / scope.snapDist ) * scope.snapDist;
 						}
 
 					}
@@ -636,7 +647,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 					if ( scope.space == 'local' ) {
 
 						if ( isActive("XYZ")) {
-							
+
 							scale = 1 + ( ( point.y ) / 50 );
 
 							scope.object.scale.x = oldScale.x * scale;
@@ -644,7 +655,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 							scope.object.scale.z = oldScale.z * scale;
 
 						} else {
-	
+
 							point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
 							if ( !(isActive("X")) || scope.modifierAxis.x != 1 ) point.x = 0;
@@ -681,7 +692,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 						tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionE );
 						tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
-						
+
 						scope.object.rotation.setEulerFromQuaternion( tempQuaternion );
 
 					} else if ( scope.active == "RXYZ" ) {
@@ -705,7 +716,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 						if ( scope.active == "RX" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionX );
 						if ( scope.active == "RY" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionY );
 						if ( scope.active == "RZ" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionZ );
-						
+
 						scope.object.rotation.setEulerFromQuaternion( quaternionXYZ );
 
 					} else if ( scope.space == 'world' ) {
@@ -725,7 +736,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 						if ( scope.active == "RZ" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 
 						tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
-						
+
 						scope.object.rotation.setEulerFromQuaternion( tempQuaternion );
 
 					}
@@ -762,26 +773,26 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 		if ( event.keyCode == 69 ) { // E
 
-			if ( scope.mode == 'rotate' ) scope.space = ( scope.space == 'world' ) ? 'local' : 'world';			
+			if ( scope.mode == 'rotate' ) scope.space = ( scope.space == 'world' ) ? 'local' : 'world';
 			scope.mode = 'rotate';
 
 		}
 
 		if ( event.keyCode == 82 ) { // R
-			
+
 			scope.mode = 'scale';
 			scope.space = 'local';
 
 		}
 
 		if ( event.keyCode == 187 || event.keyCode == 107 ) { // +,=,num+
-			
+
 			scope.scale += 0.1
 
 		}
 
 		if ( event.keyCode == 189 || event.keyCode == 109) { // -,_,num-
-			
+
 			scope.scale -= 0.1
 			scope.scale = Math.max( scope.scale, 0.1 );
 
@@ -801,10 +812,10 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 		projector.unprojectVector( pointerVector, scope.camera );
 		ray.set( camPosition, pointerVector.sub( camPosition ).normalize() );
-		
+
 		var intersections = ray.intersectObjects( objects, true );
 		return intersections[0] ? intersections[0] : false;
-	
+
 	}
 
 	function isActive( name ) {
@@ -825,4 +836,4 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 };
 
-THREE.TransformControls.prototype = Object.create( THREE.EventDispatcher.prototype );
+THREE.TransformControls.prototype = Object.create( THREE.EventDispatcher.prototype );