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

editor/index.html

@@ -37,13 +37,14 @@
 		<script src="js/UI.js"></script>
 		<script src="js/UI.three.js"></script>
 		<script src="js/ui/Menubar.js"></script>
-		<script src="js/ui/Viewport.js"></script>
+		<script src="js/ui/Menubar.File.js"></script>
 		<script src="js/ui/Sidebar.js"></script>
 		<script src="js/ui/Sidebar.Outliner.js"></script>
 		<script src="js/ui/Sidebar.Properties.js"></script>
 		<script src="js/ui/Sidebar.Properties.Object3D.js"></script>
 		<script src="js/ui/Sidebar.Properties.Geometry.js"></script>
 		<script src="js/ui/Sidebar.Properties.Material.js"></script>
+		<script src="js/ui/Viewport.js"></script>
 
 		<script>
 
@@ -67,6 +68,12 @@
 
 			//
 
+			var viewport = new Viewport( signals );
+			viewport.setTop( '32px' );
+			viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
+			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
+			document.body.appendChild( viewport.dom );
+
 			var menubar = new Menubar( signals );
 			menubar.setWidth( '100%' );
 			menubar.setHeight( '32px' );
@@ -78,21 +85,19 @@
 			sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 			document.body.appendChild( sidebar.dom );
 
-			var viewport = new Viewport( signals );
-			viewport.setTop( '32px' );
-			viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
-			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
-			document.body.appendChild( viewport.dom );
-
 			document.addEventListener( 'keydown', function ( event ) {
 
-				// delete
+				switch ( event.keyCode ) {
+
+					case 46: // delete
 
-				if ( event.which === 46 ) {
+						if ( confirm( 'Delete selected object?' ) === true ) {
 
-					// here should come confirmation pop-up modal dialog
+							signals.objectRemoved.dispatch();
 
-					signals.objectRemoved.dispatch();
+						}
+
+						break;
 
 				}
 
@@ -203,8 +208,17 @@
 
 							var data = JSON.parse( contents );
 
-							if ( data.metadata === undefined ) data.metadata = { type: 'geometry' }; // 2.0
-							if ( data.metadata.type === undefined ) data.metadata.type = 'geometry'; // 3.0
+							if ( data.metadata === undefined ) { // 2.0
+
+								data.metadata = { type: 'geometry' };
+
+							}
+
+							if ( data.metadata.type === undefined ) { // 3.0
+
+								data.metadata.type = 'geometry';
+
+							}
 
 							if ( data.metadata.type === 'geometry' ) {
 

editor/js/UI.js

@@ -4,6 +4,8 @@ UI.Element = function () {};
 
 UI.Element.prototype = {
 
+	// styles
+
 	setStyle: function ( style, array ) {
 
 		for ( var i = 0; i < array.length; i ++ ) {
@@ -62,7 +64,7 @@ UI.Element.prototype = {
 
 	},
 
-	// border
+	//
 
 	setBorder: function () {
 
@@ -104,7 +106,7 @@ UI.Element.prototype = {
 
 	},
 
-	// margin
+	//
 
 	setMargin: function () {
 
@@ -146,7 +148,7 @@ UI.Element.prototype = {
 
 	},
 
-	// padding
+	//
 
 	setPadding: function () {
 
@@ -206,8 +208,33 @@ UI.Element.prototype = {
 
 		return this;
 
-	}
+	},
+
+	// events
+
+	onMouseOver: function ( callback ) {
+
+		this.dom.addEventListener( 'mouseover', callback, false );
+
+		return this;
+
+	},
 
+	onMouseOut: function ( callback ) {
+
+		this.dom.addEventListener( 'mouseout', callback, false );
+
+		return this;
+
+	},
+
+	onClick: function ( callback ) {
+
+		this.dom.addEventListener( 'click', callback, false );
+
+		return this;
+
+	}
 
 }
 
@@ -254,6 +281,7 @@ UI.Text = function ( position ) {
 
 	var dom = document.createElement( 'span' );
 	dom.style.position = position || 'relative';
+	dom.style.cursor = 'default';
 
 	this.dom = dom;
 

editor/js/ui/Menubar.File.js

@@ -0,0 +1,16 @@
+Menubar.File = function ( signals ) {
+
+	var container = new UI.Panel( 'absolute' );
+	container.setBackgroundColor( '#eee' );
+	container.setWidth( '120px' );
+	container.setPadding( '10px' );
+
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Open' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Reset' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export Geometry' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export Scene' ).setColor( '#666' ) ) );
+	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export OBJ' ).setColor( '#666' ) ) );
+
+	return container;
+
+}

editor/js/ui/Menubar.js

@@ -5,12 +5,82 @@ var Menubar = function ( signals ) {
 
 	var options = new UI.Panel();
 	options.setMargin( '8px' );
-	options.add( new UI.Text().setValue( 'File' ).setColor( '#666' ).setMarginRight( '20px' ) );
-	options.add( new UI.Text().setValue( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ) );
-	options.add( new UI.Text().setValue( 'Add' ).setColor( '#666' ).setMarginRight( '20px' ) );
-	options.add( new UI.Text().setValue( 'Help' ).setColor( '#666' ).setMarginRight( '20px' ) );
+
+	// File
+
+	var optionFile = new UI.Text().setValue( 'File' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionFileClick );
+	options.add( optionFile );
+
+	var optionFileMenu = new Menubar.File().setTop( '32px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionFileMenu );
+
+	// Edit
+
+	var optionEdit = new UI.Text().setValue( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionEditClick );
+	options.add( optionEdit );
+
+	var optionEditMenu = new Menubar.File().setTop( '32px' ).setLeft( '50px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionEditMenu );
+
+	// Add
+
+	var optionAdd = new UI.Text().setValue( 'Add' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionAddClick );
+	options.add( optionAdd );
+
+	var optionAddMenu = new Menubar.File().setTop( '32px' ).setLeft( '90px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionAddMenu );
+
+
+	// Help
+
+	var optionHelp = new UI.Text().setValue( 'Help' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionHelpClick );
+	options.add( optionHelp );
+
+	var optionHelpMenu = new Menubar.File().setTop( '32px' ).setLeft( '140px' ).setDisplay( 'none' ).onMouseOut( closeAll );
+	container.add( optionHelpMenu );
+
+
+	//
+
 	container.add( options );
 
+	function closeAll() {
+
+		optionFileMenu.setDisplay( 'none' );
+		optionEditMenu.setDisplay( 'none' );
+		optionAddMenu.setDisplay( 'none' );
+		optionHelpMenu.setDisplay( 'none' );
+
+	}
+
+	function onOptionFileClick() {
+
+		closeAll();
+		optionFileMenu.setDisplay( '' );
+
+	}
+
+	function onOptionEditClick() {
+
+		closeAll();
+		optionEditMenu.setDisplay( '' );
+
+	}
+
+	function onOptionAddClick() {
+
+		closeAll();
+		optionAddMenu.setDisplay( '' );
+
+	}
+
+	function onOptionHelpClick() {
+
+		closeAll();
+		optionHelpMenu.setDisplay( '' );
+
+	}
+
 	return container;
 
 }

editor/js/ui/Viewport.js

@@ -88,39 +88,43 @@ var Viewport = function ( signals ) {
 
 		event.preventDefault();
 
-		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
-		);
+		if ( event.button === 0 ) {
 
-		projector.unprojectVector( vector, camera );
+			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
+			);
 
-		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
+			projector.unprojectVector( vector, camera );
 
-		var intersects = ray.intersectObjects( objects, true );
+			ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
 
-		if ( intersects.length > 0 ) {
+			var intersects = ray.intersectObjects( objects, true );
 
-			controls.enabled = false;
+			if ( intersects.length > 0 ) {
 
-			intersectionPlane.position.copy( intersects[ 0 ].object.position );
-			intersectionPlane.lookAt( camera.position );
+				controls.enabled = false;
 
-			picked = intersects[ 0 ].object;
-			selected = picked;
+				intersectionPlane.position.copy( intersects[ 0 ].object.position );
+				intersectionPlane.lookAt( camera.position );
 
-			signals.objectSelected.dispatch( selected );
+				picked = intersects[ 0 ].object;
+				selected = picked;
+
+				signals.objectSelected.dispatch( selected );
 
-			var intersects = ray.intersectObject( intersectionPlane );
-			offset.copy( intersects[ 0 ].point ).subSelf( intersectionPlane.position );
+				var intersects = ray.intersectObject( intersectionPlane );
+				offset.copy( intersects[ 0 ].point ).subSelf( intersectionPlane.position );
 
-			document.addEventListener( 'mousemove', onMouseMove, false );
-			document.addEventListener( 'mouseup', onMouseUp, false );
+				document.addEventListener( 'mousemove', onMouseMove, false );
+				document.addEventListener( 'mouseup', onMouseUp, false );
 
-		} else {
+			} else {
 
-			controls.enabled = true;
+				controls.enabled = true;
+
+			}
 
 		}
 
@@ -161,28 +165,34 @@ var Viewport = function ( signals ) {
 
 	var onClick = function ( event ) {
 
-		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
-		);
+		if ( event.button === 0 ) {
 
-		projector.unprojectVector( vector, camera );
+			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
+			);
 
-		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
-		var intersects = ray.intersectObjects( objects, true );
+			projector.unprojectVector( vector, camera );
 
-		if ( intersects.length > 0 ) {
+			ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
+			var intersects = ray.intersectObjects( objects, true );
+
+			if ( intersects.length > 0 ) {
+
+				selected = intersects[ 0 ].object;
 
-			selected = intersects[ 0 ].object;
+			} else {
 
-		} else {
+				selected = null;
 
-			selected = null;
+			}
+
+			signals.objectSelected.dispatch( selected );
 
 		}
 
-		signals.objectSelected.dispatch( selected );
+		controls.enabled = true;
 
 	};
 

examples/js/controls/TrackballControls.js

@@ -329,7 +329,7 @@ THREE.TrackballControls = function ( object, domElement ) {
 			_panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );
 
 		}
-		
+
 		document.addEventListener( 'mousemove', mousemove, false );
 		document.addEventListener( 'mouseup', mouseup, false );