Merge pull request #6795 from tschw/TransformControls

Fixes TransformControl breakage.

examples/js/controls/TransformControls.js

@@ -7,6 +7,7 @@
 
 	'use strict';
 
+
 	var GizmoMaterial = function ( parameters ) {
 
 		THREE.MeshBasicMaterial.call( this );
@@ -42,6 +43,7 @@
 	GizmoMaterial.prototype = Object.create( THREE.MeshBasicMaterial.prototype );
 	GizmoMaterial.prototype.constructor = GizmoMaterial;
 
+
 	var GizmoLineMaterial = function ( parameters ) {
 
 		THREE.LineBasicMaterial.call( this );
@@ -77,11 +79,13 @@
 	GizmoLineMaterial.prototype = Object.create( THREE.LineBasicMaterial.prototype );
 	GizmoLineMaterial.prototype.constructor = GizmoLineMaterial;
 
+
+	var pickerMaterial = new GizmoMaterial( { visible: false, transparent: false } );
+
+
 	THREE.TransformGizmo = function () {
 
 		var scope = this;
-		var showPickers = false; //debug
-		var showActivePlane = false; //debug
 
 		this.init = function () {
 
@@ -98,8 +102,7 @@
 			//// PLANES
 
 			var planeGeometry = new THREE.PlaneBufferGeometry( 50, 50, 2, 2 );
-			var planeMaterial = new THREE.MeshBasicMaterial( { wireframe: true } );
-			planeMaterial.side = THREE.DoubleSide;
+			var planeMaterial = new THREE.MeshBasicMaterial( { visible: false, side: THREE.DoubleSide } );
 
 			var planes = {
 				"XY":   new THREE.Mesh( planeGeometry, planeMaterial ),
@@ -117,7 +120,6 @@
 				planes[i].name = i;
 				this.planes.add(planes[i]);
 				this.planes[i] = planes[i];
-				planes[i].visible = false;
 			}
 
 			//// HANDLES AND PICKERS
@@ -151,7 +153,9 @@
 			// reset Transformations
 
 			this.traverse(function ( child ) {
+
 				if (child instanceof THREE.Mesh) {
+
 					child.updateMatrix();
 
 					var tempGeometry = child.geometry.clone();
@@ -161,36 +165,45 @@
 					child.position.set( 0, 0, 0 );
 					child.rotation.set( 0, 0, 0 );
 					child.scale.set( 1, 1, 1 );
+
 				}
+
 			});
 
 		};
 
 		this.hide = function () {
-			this.traverse(function( child ) {
-				child.visible = false;
-			});
+
+			this.traverse( function( child ) { child.visible = false; } );
+
 		};
 
 		this.show = function () {
-			this.traverse(function( child ) {
-				child.visible = true;
-				if (child.parent == scope.pickers ) child.visible = showPickers;
-				if (child.parent == scope.planes ) child.visible = false;
-			});
-			this.activePlane.visible = showActivePlane;
+
+			this.traverse( function( child ) { child.visible = true; } );
+
 		};
 
 		this.highlight = function ( axis ) {
-			this.traverse(function( child ) {
+
+			this.traverse( function( child ) {
+
 				if ( child.material && child.material.highlight ) {
-					if ( child.name == axis ) {
+
+					if ( child.name === axis ) {
+
 						child.material.highlight( true );
+
 					} else {
+
 						child.material.highlight( false );
+
 					}
+
 				}
-			});
+
+			} );
+
 		};
 
 	};
@@ -204,13 +217,19 @@
 		var vec2 = new THREE.Vector3( 0, 1, 0 );
 		var lookAtMatrix = new THREE.Matrix4();
 
-		this.traverse(function(child) {
-			if ( child.name.search("E") != -1 ) {
+		this.traverse( function(child) {
+
+			if ( child.name.search("E") !== -1 ) {
+
 				child.quaternion.setFromRotationMatrix( lookAtMatrix.lookAt( eye, vec1, vec2 ) );
-			} else if ( child.name.search("X") != -1 || child.name.search("Y") != -1 || child.name.search("Z") != -1 ) {
+
+			} else if ( child.name.search("X") !== -1 || child.name.search("Y") !== -1 || child.name.search("Z") !== -1 ) {
+
 				child.quaternion.setFromEuler( rotation );
+
 			}
-		});
+
+		} );
 
 	};
 
@@ -235,54 +254,70 @@
 		lineZGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0,  0, 0, 1 ], 3 ) );
 
 		this.handleGizmos = {
+
 			X: [
 				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0xff0000 } ) ), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
 				[ new THREE.Line( lineXGeometry, new GizmoLineMaterial( { color: 0xff0000 } ) ) ]
 			],
+
 			Y: [
 				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x00ff00 } ) ), [ 0, 0.5, 0 ] ],
 				[	new THREE.Line( lineYGeometry, new GizmoLineMaterial( { color: 0x00ff00 } ) ) ]
 			],
+
 			Z: [
 				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x0000ff } ) ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
 				[ new THREE.Line( lineZGeometry, new GizmoLineMaterial( { color: 0x0000ff } ) ) ]
 			],
+
 			XYZ: [
 				[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.1, 0 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ 0, 0, 0 ] ]
 			],
+
 			XY: [
 				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ), [ 0.15, 0.15, 0 ] ]
 			],
+
 			YZ: [
 				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0x00ffff, opacity: 0.25 } ) ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ] ]
 			],
+
 			XZ: [
 				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0xff00ff, opacity: 0.25 } ) ), [ 0.15, 0, 0.15 ], [ -Math.PI / 2, 0, 0 ] ]
 			]
+
 		};
 
 		this.pickerGizmos = {
+
 			X: [
-				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ]
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ]
 			],
+
 			Y: [
-				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ), [ 0, 0.6, 0 ] ]
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0.6, 0 ] ]
 			],
+
 			Z: [
-				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ]
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ]
 			],
+
 			XYZ: [
-				[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.2, 0 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ) ]
+				[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.2, 0 ), pickerMaterial ) ]
 			],
+
 			XY: [
-				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), new GizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ), [ 0.2, 0.2, 0 ] ]
+				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), pickerMaterial ), [ 0.2, 0.2, 0 ] ]
 			],
+
 			YZ: [
-				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), new GizmoMaterial( { color: 0x00ffff, opacity: 0.25 } ) ), [ 0, 0.2, 0.2 ], [ 0, Math.PI / 2, 0 ] ]
+				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), pickerMaterial ), [ 0, 0.2, 0.2 ], [ 0, Math.PI / 2, 0 ] ]
 			],
+
 			XZ: [
-				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), new GizmoMaterial( { color: 0xff00ff, opacity: 0.25 } ) ), [ 0.2, 0, 0.2 ], [ -Math.PI / 2, 0, 0 ] ]
+				[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), pickerMaterial ), [ 0.2, 0, 0.2 ], [ -Math.PI / 2, 0, 0 ] ]
 			]
+
 		};
 
 		this.setActivePlane = function ( axis, eye ) {
@@ -290,31 +325,37 @@
 			var tempMatrix = new THREE.Matrix4();
 			eye.applyMatrix4( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) );
 
-			if ( axis == "X" ) {
+			if ( axis === "X" ) {
+
 				this.activePlane = this.planes[ "XY" ];
+
 				if ( Math.abs(eye.y) > Math.abs(eye.z) ) this.activePlane = this.planes[ "XZ" ];
+
 			}
 
-			if ( axis == "Y" ) {
+			if ( axis === "Y" ) {
+
 				this.activePlane = this.planes[ "XY" ];
+
 				if ( Math.abs(eye.x) > Math.abs(eye.z) ) this.activePlane = this.planes[ "YZ" ];
+
 			}
 
-			if ( axis == "Z" ) {
+			if ( axis === "Z" ) {
+
 				this.activePlane = this.planes[ "XZ" ];
+
 				if ( Math.abs(eye.x) > Math.abs(eye.y) ) this.activePlane = this.planes[ "YZ" ];
-			}
 
-			if ( axis == "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
+			}
 
-			if ( axis == "XY" ) this.activePlane = this.planes[ "XY" ];
+			if ( axis === "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
 
-			if ( axis == "YZ" ) this.activePlane = this.planes[ "YZ" ];
+			if ( axis === "XY" ) this.activePlane = this.planes[ "XY" ];
 
-			if ( axis == "XZ" ) this.activePlane = this.planes[ "XZ" ];
+			if ( axis === "YZ" ) this.activePlane = this.planes[ "YZ" ];
 
-			this.hide();
-			this.show();
+			if ( axis === "XZ" ) this.activePlane = this.planes[ "XZ" ];
 
 		};
 
@@ -334,63 +375,77 @@
 			var geometry = new THREE.BufferGeometry();
 			var vertices = [];
 			arc = arc ? arc : 1;
+
 			for ( var i = 0; i <= 64 * arc; ++ i ) {
-				if ( facing == 'x' ) vertices.push( 0, Math.cos( i / 32 * Math.PI ) * radius, Math.sin( i / 32 * Math.PI ) * radius );
-				if ( facing == 'y' ) vertices.push( Math.cos( i / 32 * Math.PI ) * radius, 0, Math.sin( i / 32 * Math.PI ) * radius );
-				if ( facing == 'z' ) vertices.push( Math.sin( i / 32 * Math.PI ) * radius, Math.cos( i / 32 * Math.PI ) * radius, 0 );
+
+				if ( facing === 'x' ) vertices.push( 0, Math.cos( i / 32 * Math.PI ) * radius, Math.sin( i / 32 * Math.PI ) * radius );
+				if ( facing === 'y' ) vertices.push( Math.cos( i / 32 * Math.PI ) * radius, 0, Math.sin( i / 32 * Math.PI ) * radius );
+				if ( facing === 'z' ) vertices.push( Math.sin( i / 32 * Math.PI ) * radius, Math.cos( i / 32 * Math.PI ) * radius, 0 );
+
 			}
+
 			geometry.addAttribute( 'position', new THREE.Float32Attribute( vertices, 3 ) );
 			return geometry;
+
 		};
 
 		this.handleGizmos = {
+
 			X: [
 				[ new THREE.Line( new CircleGeometry(1,'x',0.5), new GizmoLineMaterial( { color: 0xff0000 } ) ) ]
 			],
+
 			Y: [
 				[ new THREE.Line( new CircleGeometry(1,'y',0.5), new GizmoLineMaterial( { color: 0x00ff00 } ) ) ]
 			],
+
 			Z: [
 				[ new THREE.Line( new CircleGeometry(1,'z',0.5), new GizmoLineMaterial( { color: 0x0000ff } ) ) ]
 			],
+
 			E: [
 				[ new THREE.Line( new CircleGeometry(1.25,'z',1), new GizmoLineMaterial( { color: 0xcccc00 } ) ) ]
 			],
+
 			XYZE: [
 				[ new THREE.Line( new CircleGeometry(1,'z',1), new GizmoLineMaterial( { color: 0x787878 } ) ) ]
 			]
+
 		};
 
 		this.pickerGizmos = {
+
 			X: [
-				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new GizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ 0, -Math.PI / 2, -Math.PI / 2 ] ]
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), pickerMaterial ), [ 0, 0, 0 ], [ 0, -Math.PI / 2, -Math.PI / 2 ] ]
 			],
+
 			Y: [
-				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new GizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ]
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), pickerMaterial ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ]
 			],
+
 			Z: [
-				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new GizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ]
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), pickerMaterial ), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ]
 			],
+
 			E: [
-				[ new THREE.Mesh( new THREE.TorusGeometry( 1.25, 0.12, 2, 24 ), new GizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ) ]
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1.25, 0.12, 2, 24 ), pickerMaterial ) ]
 			],
+
 			XYZE: [
 				[ new THREE.Mesh( new THREE.Geometry() ) ]// TODO
 			]
+
 		};
 
 		this.setActivePlane = function ( axis ) {
 
-			if ( axis == "E" ) this.activePlane = this.planes[ "XYZE" ];
-
-			if ( axis == "X" ) this.activePlane = this.planes[ "YZ" ];
+			if ( axis === "E" ) this.activePlane = this.planes[ "XYZE" ];
 
-			if ( axis == "Y" ) this.activePlane = this.planes[ "XZ" ];
+			if ( axis === "X" ) this.activePlane = this.planes[ "YZ" ];
 
-			if ( axis == "Z" ) this.activePlane = this.planes[ "XY" ];
+			if ( axis === "Y" ) this.activePlane = this.planes[ "XZ" ];
 
-			this.hide();
-			this.show();
+			if ( axis === "Z" ) this.activePlane = this.planes[ "XY" ];
 
 		};
 
@@ -399,8 +454,10 @@
 			THREE.TransformGizmo.prototype.update.apply( this, arguments );
 
 			var group = {
+
 				handles: this["handles"],
 				pickers: this["pickers"],
+
 			};
 
 			var tempMatrix = new THREE.Matrix4();
@@ -424,22 +481,28 @@
 
 				tempQuaternion.setFromEuler( worldRotation );
 
-				if ( child.name == "X" ) {
+				if ( child.name === "X" ) {
+
 					quaternionX.setFromAxisAngle( unitX, Math.atan2( -eye.y, eye.z ) );
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 					child.quaternion.copy( tempQuaternion );
+
 				}
 
-				if ( child.name == "Y" ) {
+				if ( child.name === "Y" ) {
+
 					quaternionY.setFromAxisAngle( unitY, Math.atan2( eye.x, eye.z ) );
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
 					child.quaternion.copy( tempQuaternion );
+
 				}
 
-				if ( child.name == "Z" ) {
+				if ( child.name === "Z" ) {
+
 					quaternionZ.setFromAxisAngle( unitZ, Math.atan2( eye.y, eye.x ) );
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 					child.quaternion.copy( tempQuaternion );
+
 				}
 
 			});
@@ -474,36 +537,46 @@
 		lineZGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0,  0, 0, 1 ], 3 ) );
 
 		this.handleGizmos = {
+
 			X: [
 				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0xff0000 } ) ), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
 				[ new THREE.Line( lineXGeometry, new GizmoLineMaterial( { color: 0xff0000 } ) ) ]
 			],
+
 			Y: [
 				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x00ff00 } ) ), [ 0, 0.5, 0 ] ],
 				[ new THREE.Line( lineYGeometry, new GizmoLineMaterial( { color: 0x00ff00 } ) ) ]
 			],
+
 			Z: [
 				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x0000ff } ) ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
 				[ new THREE.Line( lineZGeometry, new GizmoLineMaterial( { color: 0x0000ff } ) ) ]
 			],
+
 			XYZ: [
 				[ new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ) ]
 			]
+
 		};
 
 		this.pickerGizmos = {
+
 			X: [
-				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ]
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ]
 			],
+
 			Y: [
-				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ), [ 0, 0.6, 0 ] ]
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0.6, 0 ] ]
 			],
+
 			Z: [
-				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ]
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ]
 			],
+
 			XYZ: [
-				[ new THREE.Mesh( new THREE.BoxGeometry( 0.4, 0.4, 0.4 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ) ]
+				[ new THREE.Mesh( new THREE.BoxGeometry( 0.4, 0.4, 0.4 ), pickerMaterial ) ]
 			]
+
 		};
 
 		this.setActivePlane = function ( axis, eye ) {
@@ -511,25 +584,22 @@
 			var tempMatrix = new THREE.Matrix4();
 			eye.applyMatrix4( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) );
 
-			if ( axis == "X" ) {
+			if ( axis === "X" ) {
 				this.activePlane = this.planes[ "XY" ];
 				if ( Math.abs(eye.y) > Math.abs(eye.z) ) this.activePlane = this.planes[ "XZ" ];
 			}
 
-			if ( axis == "Y" ) {
+			if ( axis === "Y" ) {
 				this.activePlane = this.planes[ "XY" ];
 				if ( Math.abs(eye.x) > Math.abs(eye.z) ) this.activePlane = this.planes[ "YZ" ];
 			}
 
-			if ( axis == "Z" ) {
+			if ( axis === "Z" ) {
 				this.activePlane = this.planes[ "XZ" ];
 				if ( Math.abs(eye.x) > Math.abs(eye.y) ) this.activePlane = this.planes[ "YZ" ];
 			}
 
-			if ( axis == "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
-
-			this.hide();
-			this.show();
+			if ( axis === "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
 
 		};
 
@@ -580,7 +650,7 @@
 		var objectChangeEvent = { type: "objectChange" };
 
 		var ray = new THREE.Raycaster();
-		var pointerVector = new THREE.Vector3();
+		var pointerVector = new THREE.Vector2();
 
 		var point = new THREE.Vector3();
 		var offset = new THREE.Vector3();
@@ -634,6 +704,7 @@
 		domElement.addEventListener( "touchleave", onPointerUp, false );
 
 		this.dispose = function () {
+
 			domElement.removeEventListener( "mousedown", onPointerDown );
 			domElement.removeEventListener( "touchstart", onPointerDown );
 
@@ -648,6 +719,7 @@
 			domElement.removeEventListener( "touchend", onPointerUp );
 			domElement.removeEventListener( "touchcancel", onPointerUp );
 			domElement.removeEventListener( "touchleave", onPointerUp );
+
 		};
 
 		this.attach = function ( object ) {
@@ -678,7 +750,7 @@
 
 			_mode = mode ? mode : _mode;
 
-			if ( _mode == "scale" ) scope.space = "local";
+			if ( _mode === "scale" ) scope.space = "local";
 
 			this.gizmo["translate"].hide();
 			this.gizmo["rotate"].hide();
@@ -730,12 +802,16 @@
 
 			eye.copy( camPosition ).sub( worldPosition ).normalize();
 
-			if ( scope.space == "local" )
+			if ( scope.space === "local" ) {
+
 				this.gizmo[_mode].update( worldRotation, eye );
 
-			else if ( scope.space == "world" )
+			} else if ( scope.space === "world" ) {
+
 				this.gizmo[_mode].update( new THREE.Euler(), eye );
 
+			}
+
 			this.gizmo[_mode].highlight( scope.axis );
 
 		};
@@ -833,18 +909,18 @@
 
 			point.copy( planeIntersect.point );
 
-			if ( _mode == "translate" ) {
+			if ( _mode === "translate" ) {
 
 				point.sub( offset );
 				point.multiply(parentScale);
 
-				if ( scope.space == "local" ) {
+				if ( scope.space === "local" ) {
 
 					point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
-					if ( scope.axis.search("X") == -1 ) point.x = 0;
-					if ( scope.axis.search("Y") == -1 ) point.y = 0;
-					if ( scope.axis.search("Z") == -1 ) point.z = 0;
+					if ( scope.axis.search("X") === -1 ) point.x = 0;
+					if ( scope.axis.search("Y") === -1 ) point.y = 0;
+					if ( scope.axis.search("Z") === -1 ) point.z = 0;
 
 					point.applyMatrix4( oldRotationMatrix );
 
@@ -853,11 +929,11 @@
 
 				}
 
-				if ( scope.space == "world" || scope.axis.search("XYZ") != -1 ) {
+				if ( scope.space === "world" || scope.axis.search("XYZ") !== -1 ) {
 
-					if ( scope.axis.search("X") == -1 ) point.x = 0;
-					if ( scope.axis.search("Y") == -1 ) point.y = 0;
-					if ( scope.axis.search("Z") == -1 ) point.z = 0;
+					if ( scope.axis.search("X") === -1 ) point.x = 0;
+					if ( scope.axis.search("Y") === -1 ) point.y = 0;
+					if ( scope.axis.search("Z") === -1 ) point.z = 0;
 
 					point.applyMatrix4( tempMatrix.getInverse( parentRotationMatrix ) );
 
@@ -868,20 +944,20 @@
 
 				if ( scope.snap !== null ) {
 
-					if ( scope.axis.search("X") != -1 ) scope.object.position.x = Math.round( scope.object.position.x / scope.snap ) * scope.snap;
-					if ( scope.axis.search("Y") != -1 ) scope.object.position.y = Math.round( scope.object.position.y / scope.snap ) * scope.snap;
-					if ( scope.axis.search("Z") != -1 ) scope.object.position.z = Math.round( scope.object.position.z / scope.snap ) * scope.snap;
+					if ( scope.axis.search("X") !== -1 ) scope.object.position.x = Math.round( scope.object.position.x / scope.snap ) * scope.snap;
+					if ( scope.axis.search("Y") !== -1 ) scope.object.position.y = Math.round( scope.object.position.y / scope.snap ) * scope.snap;
+					if ( scope.axis.search("Z") !== -1 ) scope.object.position.z = Math.round( scope.object.position.z / scope.snap ) * scope.snap;
 
 				}
 
-			} else if ( _mode == "scale" ) {
+			} else if ( _mode === "scale" ) {
 
 				point.sub( offset );
 				point.multiply(parentScale);
 
-				if ( scope.space == "local" ) {
+				if ( scope.space === "local" ) {
 
-					if ( scope.axis == "XYZ") {
+					if ( scope.axis === "XYZ") {
 
 						scale = 1 + ( ( point.y ) / 50 );
 
@@ -893,22 +969,22 @@
 
 						point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
-						if ( scope.axis == "X" ) scope.object.scale.x = oldScale.x * ( 1 + point.x / 50 );
-						if ( scope.axis == "Y" ) scope.object.scale.y = oldScale.y * ( 1 + point.y / 50 );
-						if ( scope.axis == "Z" ) scope.object.scale.z = oldScale.z * ( 1 + point.z / 50 );
+						if ( scope.axis === "X" ) scope.object.scale.x = oldScale.x * ( 1 + point.x / 50 );
+						if ( scope.axis === "Y" ) scope.object.scale.y = oldScale.y * ( 1 + point.y / 50 );
+						if ( scope.axis === "Z" ) scope.object.scale.z = oldScale.z * ( 1 + point.z / 50 );
 
 					}
 
 				}
 
-			} else if ( _mode == "rotate" ) {
+			} else if ( _mode === "rotate" ) {
 
 				point.sub( worldPosition );
-				point.multiply(parentScale);
-				tempVector.copy(offset).sub( worldPosition );
-				tempVector.multiply(parentScale);
+				point.multiply( parentScale );
+				tempVector.copy( offset ).sub( worldPosition );
+				tempVector.multiply( parentScale );
 
-				if ( scope.axis == "E" ) {
+				if ( scope.axis === "E" ) {
 
 					point.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
 					tempVector.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
@@ -926,7 +1002,7 @@
 
 					scope.object.quaternion.copy( tempQuaternion );
 
-				} else if ( scope.axis == "XYZE" ) {
+				} else if ( scope.axis === "XYZE" ) {
 
 					quaternionE.setFromEuler( point.clone().cross(tempVector).normalize() ); // rotation axis
 
@@ -939,7 +1015,7 @@
 
 					scope.object.quaternion.copy( tempQuaternion );
 
-				} else if ( scope.space == "local" ) {
+				} else if ( scope.space === "local" ) {
 
 					point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
@@ -953,13 +1029,13 @@
 					quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y );
 					quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
 
-					if ( scope.axis == "X" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionX );
-					if ( scope.axis == "Y" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionY );
-					if ( scope.axis == "Z" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionZ );
+					if ( scope.axis === "X" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionX );
+					if ( scope.axis === "Y" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionY );
+					if ( scope.axis === "Z" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionZ );
 
 					scope.object.quaternion.copy( quaternionXYZ );
 
-				} else if ( scope.space == "world" ) {
+				} else if ( scope.space === "world" ) {
 
 					rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
 					offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
@@ -971,9 +1047,9 @@
 					quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
 					quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
 
-					if ( scope.axis == "X" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
-					if ( scope.axis == "Y" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
-					if ( scope.axis == "Z" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
+					if ( scope.axis === "X" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
+					if ( scope.axis === "Y" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
+					if ( scope.axis === "Z" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
 
@@ -992,9 +1068,12 @@
 		function onPointerUp( event ) {
 
 			if ( _dragging && ( scope.axis !== null ) ) {
+
 				mouseUpEvent.mode = _mode;
 				scope.dispatchEvent( mouseUpEvent )
+
 			}
+
 			_dragging = false;
 			onPointerHover( event );
 
@@ -1006,10 +1085,8 @@
 			var x = ( pointer.clientX - rect.left ) / rect.width;
 			var y = ( pointer.clientY - rect.top ) / rect.height;
 
-			pointerVector.set( ( x * 2 ) - 1, - ( y * 2 ) + 1, 0.5 );
-			pointerVector.unproject( camera );
-
-			ray.set( camPosition, pointerVector.sub( camPosition ).normalize() );
+			pointerVector.set( ( x * 2 ) - 1, - ( y * 2 ) + 1 );
+			ray.setFromCamera( pointerVector, camera );
 
 			var intersections = ray.intersectObjects( objects, true );
 			return intersections[0] ? intersections[0] : false;

examples/misc_controls_transform.html

@@ -98,7 +98,7 @@
 						control.setSize( control.size + 0.1 );
 						break;
 					case 189:
-					case 10: // -,_,num-
+					case 109: // -,_,num-
 						control.setSize( Math.max(control.size - 0.1, 0.1 ) );
 						break;
 		            }

examples/webgl_interactive_draggablecubes.html

@@ -162,7 +162,13 @@
 				if ( SELECTED ) {
 
 					var intersects = raycaster.intersectObject( plane );
-					SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
+
+					if ( intersects.length > 0 ) {
+
+						SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
+
+					}
+
 					return;
 
 				}
@@ -201,9 +207,7 @@
 
 				event.preventDefault();
 
-				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ).unproject( camera );
-
-				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
+				raycaster.setFromCamera( mouse, camera );
 
 				var intersects = raycaster.intersectObjects( objects );
 
@@ -214,7 +218,12 @@
 					SELECTED = intersects[ 0 ].object;
 
 					var intersects = raycaster.intersectObject( plane );
-					offset.copy( intersects[ 0 ].point ).sub( plane.position );
+
+					if ( intersects.length > 0 ) {
+
+						offset.copy( intersects[ 0 ].point ).sub( plane.position );
+
+					}
 
 					container.style.cursor = 'move';