GUI: UI improvements.

gui/index.html

@@ -49,6 +49,7 @@
 				objectAdded: new SIGNALS.Signal(),
 				objectSelected: new SIGNALS.Signal(),
 				objectChanged: new SIGNALS.Signal(),
+				materialChanged: new SIGNALS.Signal(),
 				windowResize: new SIGNALS.Signal()
 
 			};
@@ -105,9 +106,7 @@
 
 						case 'js':
 
-							var loader = new THREE.GeometryLoader();
-
-							var geometry = loader.parse( JSON.parse( contents ) );
+							var geometry = new THREE.GeometryLoader().parse( JSON.parse( contents ) );
 							var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 							var mesh = new THREE.Mesh( geometry, material );
 
@@ -118,9 +117,7 @@
 
 						case 'obj':
 
-							var loader = new THREE.OBJLoader();
-
-							var object = loader.parse( contents );
+							var object = new THREE.OBJLoader().parse( contents );
 
 							signals.objectAdded.dispatch( object );
 							signals.objectSelected.dispatch( object );
@@ -135,9 +132,7 @@
 
 						case 'vtk':
 
-							var loader = new THREE.VTKLoader();
-
-							var geometry = loader.parse( contents );
+							var geometry = new THREE.VTKLoader().parse( contents );
 							var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 							var mesh = new THREE.Mesh( geometry, material );
 

gui/js/UI.js

@@ -176,8 +176,16 @@ UI.Element.prototype = {
 		this.setStyle( 'display', arguments );
 		return this;
 
+	},
+
+	setOverflow: function () {
+
+		this.setStyle( 'overflow', arguments );
+		return this;
+
 	}
 
+
 }
 
 

gui/js/ui/Menubar.js

@@ -5,9 +5,9 @@ var Menubar = function ( signals ) {
 
 	var options = new UI.Panel();
 	options.setMargin( '8px' );
-	options.add( new UI.Text().setText( 'File' ).setColor( '#666' ).setMarginRight( '10px' ) );
-	options.add( new UI.Text().setText( 'Edit' ).setColor( '#666' ).setMarginRight( '10px' ) );
-	options.add( new UI.Text().setText( 'About' ).setColor( '#666' ).setMarginRight( '10px' ) );
+	options.add( new UI.Text().setText( 'File' ).setColor( '#666' ).setMarginRight( '20px' ) );
+	options.add( new UI.Text().setText( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ) );
+	options.add( new UI.Text().setText( 'About' ).setColor( '#666' ).setMarginRight( '20px' ) );
 	container.add( options );
 
 	return container;

gui/js/ui/Sidebar.Properties.Object3D.js

@@ -1,54 +1,41 @@
 Sidebar.Properties.Object3D = function ( signals ) {
 
-	var selected = null;
-
 	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
 	container.add( new UI.Text().setText( 'OBJECT' ).setColor( '#666' ) );
-
 	container.add( new UI.Break(), new UI.Break() );
 
 	container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) );
-
-	var objectName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
-
+	var objectName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' );
 	container.add( objectName );
-
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Position' ).setColor( '#666' ) );
-
 	var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChange( update );
 	var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChange( update );
 	var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChange( update );
-
 	container.add( positionX, positionY, positionZ );
-
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Rotation' ).setColor( '#666' ) );
-
 	var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChange( update );
 	var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChange( update );
 	var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChange( update );
-
 	container.add( rotationX, rotationY, rotationZ );
-
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Scale' ).setColor( '#666' ) );
-
 	var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).onChange( update );
 	var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).onChange( update );
 	var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).onChange( update );
-
 	container.add( scaleX, scaleY, scaleZ );
-
 	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
 
 	//
 
+	var selected = null;
+
 	function update() {
 
 		if ( selected ) {

gui/js/ui/Sidebar.js

@@ -3,6 +3,7 @@ var Sidebar = function ( signals ) {
 	var container = new UI.Panel( 'absolute' );
 	container.setWidth( '300px' ).setHeight( '100%' );
 	container.setBackgroundColor( '#eee' );
+	container.setOverflow( 'auto' );
 
 	var outliner = new Sidebar.Outliner( signals );
 	container.add( outliner );

gui/js/ui/Viewport.js

@@ -46,6 +46,7 @@ var Viewport = function ( signals ) {
 	camera.lookAt( scene.position );
 	scene.add( camera );
 
+	/*
 	var controls = new THREE.TrackballControls( camera, container.dom );
 	controls.rotateSpeed = 1.0;
 	controls.zoomSpeed = 1.2;
@@ -55,6 +56,10 @@ var Viewport = function ( signals ) {
 	controls.staticMoving = true;
 	controls.dynamicDampingFactor = 0.3;
 	controls.addEventListener( 'change', render );
+	*/
+
+	var controls = new THREE.OrbitControls( camera, container.dom );
+	controls.addEventListener( 'change', render );
 
 	var light = new THREE.DirectionalLight( 0xffffff );
 	light.position.set( 1, 0.5, 0 ).normalize();
@@ -184,6 +189,12 @@ var Viewport = function ( signals ) {
 
 	} );
 
+	signals.materialChanged.add( function ( material ) {
+
+		render();
+
+	} );
+
 	signals.windowResize.add( function () {
 
 		camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
@@ -215,12 +226,12 @@ var Viewport = function ( signals ) {
 
 	function render() {
 
-		scene.updateMatrixWorld();
 		sceneHelpers.updateMatrixWorld();
+		scene.updateMatrixWorld();
 
 		renderer.clear();
-		renderer.render( scene, camera );
 		renderer.render( sceneHelpers, camera );
+		renderer.render( scene, camera );
 
 	}