Merge remote-tracking branch 'remotes/mrdoob/dev' into dev

editor/js/UI.three.js

@@ -2,7 +2,7 @@
 
 UI.Texture = function ( position ) {
 
-	UI.Element.call( this );
+    UI.Element.call( this );
 
 	var scope = this;
 
@@ -68,3 +68,75 @@ UI.Texture.prototype.onChange = function ( callback ) {
 	return this;
 
 };
+
+
+// CubeTexture
+
+UI.CubeTexture = function ( position ) {
+
+	UI.Element.call( this );
+
+	var scope = this;
+
+	this.texture = new THREE.Texture( [], new THREE.CubeReflectionMapping() );
+
+	this.dom = document.createElement( 'input' );
+	this.dom.type = 'file';
+	this.dom.style.position = position || 'relative';
+	this.dom.style.marginTop = '-2px';
+	this.dom.style.marginLeft = '-2px';
+
+	this.onChangeCallback = null;
+
+	this.dom.addEventListener( 'change', function ( event ) {
+
+		var file = event.target.files[ 0 ];
+
+		if ( file.type.match( 'image.*' ) ) {
+
+			var reader = new FileReader();
+			reader.addEventListener( 'load', function ( event ) {
+
+				var image = document.createElement( 'img' );
+				image.addEventListener( 'load', function( event ) {
+
+					scope.texture.image = [ this, this, this, this, this, this ];
+					scope.texture.needsUpdate = true;
+
+					if ( scope.onChangeCallback ) scope.onChangeCallback();
+
+				}, false );
+				image.src = event.target.result;
+
+			}, false );
+			reader.readAsDataURL( file );
+
+		}
+
+	}, false );
+
+	return this;
+
+};
+
+UI.CubeTexture.prototype = Object.create( UI.Element.prototype );
+
+UI.CubeTexture.prototype.getValue = function () {
+
+	return this.texture;
+
+};
+
+UI.CubeTexture.prototype.setValue = function ( value ) {
+
+	this.texture = value;
+
+};
+
+UI.CubeTexture.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};

editor/js/ui/Sidebar.Properties.Material.js

@@ -1,6 +1,6 @@
 Sidebar.Properties.Material = function ( signals ) {
 
-	var materials = {
+    var materials = {
 
 		'LineBasicMaterial': THREE.LineBasicMaterial,
 		'MeshBasicMaterial': THREE.MeshBasicMaterial,
@@ -133,10 +133,12 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	var materialBumpMapRow = new UI.Panel();
 	var materialBumpMapEnabled = new UI.Checkbox( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialBumpMap = new UI.Texture( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
+	var materialBumpMap = new UI.Texture( 'absolute' ).setLeft( '170px' ).setColor( '#444' ).onChange( update );
+	var materialBumpScale = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '130px' ).setWidth( '30px' ).setColor( '#444' ).onChange( update );
 
 	materialBumpMapRow.add( new UI.Text().setValue( 'Bump Map' ).setColor( '#666' ) );
 	materialBumpMapRow.add( materialBumpMapEnabled );
+	materialBumpMapRow.add( materialBumpScale );
 	materialBumpMapRow.add( materialBumpMap );
 
 	container.add( materialBumpMapRow );
@@ -169,10 +171,13 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	var materialEnvMapRow = new UI.Panel();
 	var materialEnvMapEnabled = new UI.Checkbox( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialEnvMap = new UI.Texture( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
+	var materialEnvMap = new UI.CubeTexture( 'absolute' ).setLeft( '170px' ).setColor( '#444' ).onChange( update );
+	var materialReflectivity = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '130px' ).setWidth( '30px' ).setColor( '#444' ).onChange( update );
+
 
 	materialEnvMapRow.add( new UI.Text().setValue( 'Env Map' ).setColor( '#666' ) );
 	materialEnvMapRow.add( materialEnvMapEnabled );
+	materialEnvMapRow.add( materialReflectivity );
 	materialEnvMapRow.add( materialEnvMap );
 
 	container.add( materialEnvMapRow );
@@ -288,6 +293,7 @@ Sidebar.Properties.Material = function ( signals ) {
 			if ( material.bumpMap !== undefined ) {
 
 				material.bumpMap = materialBumpMapEnabled.getValue() === true ? materialBumpMap.getValue() : null;
+				material.bumpScale = materialBumpScale.getValue();
 				material.needsUpdate = true;
 
 			}
@@ -306,14 +312,13 @@ Sidebar.Properties.Material = function ( signals ) {
 
 			}
 
-			/*
 			if ( material.envMap !== undefined ) {
 
 				material.envMap = materialEnvMapEnabled.getValue() === true ? materialEnvMap.getValue() : null;
+				material.reflectivity = materialReflectivity.getValue();
 				material.needsUpdate = true;
 
 			}
-			*/
 
 			if ( material.opacity !== undefined ) {
 
@@ -457,7 +462,6 @@ Sidebar.Properties.Material = function ( signals ) {
 				} else {
 
 					materialLightMapEnabled.setValue( false );
-					materialLightMap.setValue( null );
 
 				}
 
@@ -470,11 +474,12 @@ Sidebar.Properties.Material = function ( signals ) {
 
 					materialBumpMapEnabled.setValue( true );
 					materialBumpMap.setValue( material.bumpMap );
+					materialBumpScale.setValue( material.bumpScale );
 
 				} else {
 
 					materialBumpMapEnabled.setValue( false );
-					materialBumpMap.setValue( null );
+					materialBumpScale.setValue( 1 );
 
 				}
 
@@ -490,7 +495,6 @@ Sidebar.Properties.Material = function ( signals ) {
 				} else {
 
 					materialNormalMapEnabled.setValue( false );
-					materialNormalMap.setValue( null );
 
 				}
 
@@ -506,29 +510,26 @@ Sidebar.Properties.Material = function ( signals ) {
 				} else {
 
 					materialSpecularMapEnabled.setValue( false );
-					materialSpecularMap.setValue( null );
 
 				}
 
 			}
 
-			/*
 			if ( material.envMap !== undefined ) {
 
 				if ( material.envMap !== null ) {
 
 					materialEnvMapEnabled.setValue( true );
 					materialEnvMap.setValue( material.envMap );
+					materialReflectivity.setValue( material.reflectivity );
 
 				} else {
 
 					materialEnvMapEnabled.setValue( false );
-					materialEnvMap.setValue( null );
 
 				}
 
 			}
-			*/
 
 			if ( material.opacity !== undefined ) {
 
@@ -568,4 +569,4 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	return container;
 
-}
+}

editor/js/ui/Sidebar.Properties.Object3D.js

@@ -297,6 +297,53 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 	} );
 
+
+	signals.objectChanged.add( function ( object ) {
+
+		if ( object ) {
+
+			container.setDisplay( 'block' );
+
+			objectType.setValue( getObjectInstanceName( object ).toUpperCase() );
+
+			objectName.setValue( object.name );
+
+			objectPositionX.setValue( object.position.x );
+			objectPositionY.setValue( object.position.y );
+			objectPositionZ.setValue( object.position.z );
+
+			objectRotationX.setValue( object.rotation.x );
+			objectRotationY.setValue( object.rotation.y );
+			objectRotationZ.setValue( object.rotation.z );
+
+			objectScaleX.setValue( object.scale.x );
+			objectScaleY.setValue( object.scale.y );
+			objectScaleZ.setValue( object.scale.z );
+
+			if ( object.fov !== undefined ) {
+
+				objectFov.setValue( object.fov );
+
+			}
+
+			if ( object.near !== undefined ) {
+
+				objectNear.setValue( object.near );
+
+			}
+
+			if ( object.far !== undefined ) {
+
+				objectFar.setValue( object.far );
+
+			}
+
+			objectVisible.setValue( object.visible );
+
+		}
+
+	} );
+
 	return container;
 
 }

editor/js/ui/Viewport.js

@@ -74,28 +74,96 @@ var Viewport = function ( signals ) {
 
 	// object picking
 
+	var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ) );
+	intersectionPlane.visible = false;
+	sceneHelpers.add( intersectionPlane );
+	
+	var ray = new THREE.Ray();
 	var projector = new THREE.Projector();
-
-	var distance = 0;
+	var offset = new THREE.Vector3();
+	var picked = null;
 
 	container.dom.addEventListener( 'mousedown', function ( event ) {
 
 		event.preventDefault();
 
-		distance = 0;
+		var vector = new THREE.Vector3(
+			( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
+			- ( ( event.clientY - container.dom.offsetTop ) / container.dom.offsetHeight ) * 2 + 1,
+			0.5
+		);
+		
+		projector.unprojectVector( vector, camera );
+
+		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
+
+		var intersects = ray.intersectObjects( objects, true );
+
+		if ( intersects.length > 0 ) {
+
+			controls.enabled = false;
+
+			picked = intersects[ 0 ].object;
+
+			signals.objectSelected.dispatch( picked );
+
+			var intersects = ray.intersectObject( intersectionPlane );
+			offset.copy( intersects[ 0 ].point ).subSelf( intersectionPlane.position );
+
+		} else {
+			
+			controls.enabled = true;
+			
+		}
 
 	}, false );
 
 	container.dom.addEventListener( 'mousemove', function ( event ) {
 
-		distance += event.movementX || event.webkitMovementX || event.mozMovementX || 0;
-		distance += event.movementY || event.webkitMovementY || event.mozMovementY || 0;
+		var vector = new THREE.Vector3(
+			( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
+			- ( ( event.clientY - container.dom.offsetTop ) / container.dom.offsetHeight ) * 2 + 1,
+			0.5
+		);
+
+		projector.unprojectVector( vector, camera );
+
+		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
+		
+		if ( picked ) {
+
+			var intersects = ray.intersectObject( intersectionPlane );
+			
+			if ( intersects.length > 0 ) {
+			
+				picked.position.copy( intersects[ 0 ].point.subSelf( offset ) );
+				
+				signals.objectChanged.dispatch( picked );
+
+				render();
+
+			}
+			
+			return;
+
+		}
+		
+		var intersects = ray.intersectObjects( objects, true );
+
+		if ( intersects.length > 0 ) {
+
+			intersectionPlane.position.copy( intersects[ 0 ].object.position );
+			intersectionPlane.lookAt( camera.position );
+
+		}
 
 	}, false );
 
 	container.dom.addEventListener( 'mouseup', function ( event ) {
 
-		if ( Math.abs( distance ) > 1 ) return;
+		picked = false;
+		
+		controls.enabled = true;
 
 		var vector = new THREE.Vector3(
 			( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
@@ -105,10 +173,10 @@ var Viewport = function ( signals ) {
 
 		projector.unprojectVector( vector, camera );
 
-		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
+		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
 		var intersects = ray.intersectObjects( objects, true );
 
-		if ( intersects.length ) {
+		if ( intersects.length > 0 ) {
 
 			signals.objectSelected.dispatch( intersects[ 0 ].object );
 

examples/js/controls/TrackballControls.js

@@ -6,8 +6,8 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	THREE.EventTarget.call( this );
 
-	var _this = this,
-	STATE = { NONE : -1, ROTATE : 0, ZOOM : 1, PAN : 2 };
+	var _this = this;
+	var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2 };
 
 	this.object = object;
 	this.domElement = ( domElement !== undefined ) ? domElement : document;
@@ -41,8 +41,8 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	var lastPosition = new THREE.Vector3();
 
-	var _keyPressed = false,
-	_state = STATE.NONE,
+	var _state = STATE.NONE,
+	_prevState = STATE.NONE,
 
 	_eye = new THREE.Vector3(),
 
@@ -268,8 +268,10 @@ THREE.TrackballControls = function ( object, domElement ) {
 	function keydown( event ) {
 
 		if ( ! _this.enabled ) return;
+		
+		window.removeEventListener( 'keydown', keydown );
 
-		//event.preventDefault();
+		_prevState = _state;
 
 		if ( _state !== STATE.NONE ) {
 
@@ -288,24 +290,16 @@ THREE.TrackballControls = function ( object, domElement ) {
 			_state = STATE.PAN;
 
 		}
-
-		if ( _state !== STATE.NONE ) {
-
-			_keyPressed = true;
-
-		}
-
+	
 	}
 
 	function keyup( event ) {
 
 		if ( ! _this.enabled ) return;
-
-		if ( _state !== STATE.NONE ) {
-
-			_state = STATE.NONE;
-
-		}
+		
+		_state = _prevState;
+		
+		window.addEventListener( 'keydown', keydown, false );
 
 	}
 
@@ -317,24 +311,27 @@ THREE.TrackballControls = function ( object, domElement ) {
 		event.stopPropagation();
 
 		if ( _state === STATE.NONE ) {
-
+			
 			_state = event.button;
+				
+		}
 
-			if ( _state === STATE.ROTATE && !_this.noRotate ) {
-
-				_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
+		if ( _state === STATE.ROTATE && !_this.noRotate ) {
 
-			} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
+			_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
 
-				_zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
+		} else if ( _state === STATE.ZOOM && !_this.noZoom ) {
 
-			} else if ( !this.noPan ) {
+			_zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
 
-				_panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
+		} else if ( _state === STATE.PAN && !_this.noPan ) {
 
-			}
+			_panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
 
 		}
+		
+		document.addEventListener( 'mousemove', mousemove, false );
+		document.addEventListener( 'mouseup', mouseup, false );
 
 	}
 
@@ -342,21 +339,7 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 		if ( ! _this.enabled ) return;
 
-		if ( _keyPressed ) {
-
-			_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
-			_zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
-			_panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
-
-			_keyPressed = false;
-
-		}
-
-		if ( _state === STATE.NONE ) {
-
-			return;
-
-		} else if ( _state === STATE.ROTATE && !_this.noRotate ) {
+		if ( _state === STATE.ROTATE && !_this.noRotate ) {
 
 			_rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );
 
@@ -380,6 +363,9 @@ THREE.TrackballControls = function ( object, domElement ) {
 		event.stopPropagation();
 
 		_state = STATE.NONE;
+		
+		document.removeEventListener( 'mousemove', mousemove );
+		document.removeEventListener( 'mouseup', mouseup );
 
 	}
 
@@ -408,9 +394,7 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
 
-	this.domElement.addEventListener( 'mousemove', mousemove, false );
 	this.domElement.addEventListener( 'mousedown', mousedown, false );
-	this.domElement.addEventListener( 'mouseup', mouseup, false );
 	this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false );
 	this.domElement.addEventListener( 'mousewheel', mousewheel, false );