GUI: Material class can now be changed.

gui/js/UI.js

@@ -256,7 +256,7 @@ UI.Text = function ( position ) {
 
 UI.Text.prototype = Object.create( UI.Element.prototype );
 
-UI.Text.prototype.setText = function ( value ) {
+UI.Text.prototype.setValue = function ( value ) {
 
 	this.dom.textContent = value;
 
@@ -264,6 +264,100 @@ UI.Text.prototype.setText = function ( value ) {
 
 };
 
+// Select
+
+UI.Select = function ( position ) {
+
+	UI.Element.call( this );
+
+	var scope = this;
+
+	this.dom = document.createElement( 'select' );
+	this.dom.style.position = position || 'relative';
+	this.dom.style.width = '64px';
+	this.dom.style.height = '16px';
+	this.dom.style.border = '0px';
+	this.dom.style.padding = '0px';
+
+	this.onChangeCallback = null;
+
+	this.dom.addEventListener( 'change', function ( event ) {
+
+		// console.log( scope.dom.selectedIndex );
+		if ( scope.onChangeCallback ) scope.onChangeCallback();
+
+	}, false );
+
+	return this;
+
+};
+
+UI.Select.prototype = Object.create( UI.Element.prototype );
+
+UI.Select.prototype.setOptions = function ( options ) {
+
+	for ( var i = 0; i < options.length; i ++ ) {
+
+		var option = document.createElement( 'option' );
+		option.appendChild( document.createTextNode( options[ i ] ) );
+		this.dom.appendChild( option );
+
+	}
+
+	return this;
+
+};
+
+UI.Select.prototype.getValue = function () {
+
+	return this.dom.value;
+
+};
+
+UI.Select.prototype.setValue = function ( value ) {
+
+	this.dom.value = value;
+
+	return this;
+
+};
+
+UI.Select.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};
+
+
+// Boolean
+
+UI.Boolean = function ( position ) {
+
+	UI.Select.call( this, position );
+
+	this.setOptions( [ 'true', 'false' ] );
+
+	return this;
+
+};
+
+UI.Boolean.prototype = Object.create( UI.Select.prototype );
+
+UI.Boolean.prototype.getValue = function () {
+
+	return this.dom.value === 'true';
+
+};
+
+UI.Boolean.prototype.setValue = function ( value ) {
+
+	this.dom.value = value.toString();
+
+	return this;
+
+};
 
 // Color
 
@@ -493,7 +587,7 @@ UI.Button = function ( position ) {
 
 UI.Button.prototype = Object.create( UI.Element.prototype );
 
-UI.Button.prototype.setText = function ( value ) {
+UI.Button.prototype.setLabel = function ( value ) {
 
 	this.dom.textContent = value;
 

gui/js/ui/Menubar.js

@@ -5,9 +5,10 @@ var Menubar = function ( signals ) {
 
 	var options = new UI.Panel();
 	options.setMargin( '8px' );
-	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' ) );
+	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' ) );
 	container.add( options );
 
 	return container;

gui/js/ui/Sidebar.Outliner.js

@@ -6,7 +6,7 @@ Sidebar.Outliner = function ( signals ) {
 	container.setPadding( '8px' );
 	container.setBorderTop( '1px solid #ccc' );
 
-	container.add( new UI.Text().setText( 'SCENE' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
 
 	container.add( new UI.Break(), new UI.Break() );
 

gui/js/ui/Sidebar.Properties.Geometry.js

@@ -3,26 +3,26 @@ Sidebar.Properties.Geometry = function ( signals ) {
 	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
-	container.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
-	container.add( new UI.Button( 'absolute' ).setRight( '0px' ).setText( 'Export' ).onClick( exportGeometry ) );
+	container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
+	container.add( new UI.Button( 'absolute' ).setRight( '0px' ).setLabel( 'Export' ).onClick( exportGeometry ) );
 	container.add( new UI.Break(), new UI.Break() );
 
-	container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
 	var geometryName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 	container.add( geometryName );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Class' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
 	var geometryClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 	container.add( geometryClass );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Vertices' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
 	var verticesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 	container.add( verticesCount );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Faces' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
 	var facesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 	container.add( facesCount );
 	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
@@ -39,10 +39,10 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 			container.setDisplay( 'block' );
 
-			geometryName.setText( object.geometry.name );
-			geometryClass.setText( getGeometryInstanceName( object.geometry ) );
-			verticesCount.setText( object.geometry.vertices.length );
-			facesCount.setText( object.geometry.faces.length );
+			geometryName.setValue( object.geometry.name );
+			geometryClass.setValue( getGeometryInstanceName( object.geometry ) );
+			verticesCount.setValue( object.geometry.vertices.length );
+			facesCount.setValue( object.geometry.faces.length );
 
 		} else {
 
@@ -56,25 +56,33 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 	function getGeometryInstanceName( geometry ) {
 
-		// TODO: Is there a way of doing this automatically?
-
-		if ( geometry instanceof THREE.ConvexGeometry ) return "ConvexGeometry";
-		if ( geometry instanceof THREE.CubeGeometry ) return "CubeGeometry";
-		if ( geometry instanceof THREE.CylinderGeometry ) return "CylinderGeometry";
-		if ( geometry instanceof THREE.ExtrudeGeometry ) return "ExtrudeGeometry";
-		if ( geometry instanceof THREE.IcosahedronGeometry ) return "IcosahedronGeometry";
-		if ( geometry instanceof THREE.LatheGeometry ) return "LatheGeometry";
-		if ( geometry instanceof THREE.OctahedronGeometry ) return "OctahedronGeometry";
-		if ( geometry instanceof THREE.ParametricGeometry ) return "ParametricGeometry";
-		if ( geometry instanceof THREE.PlaneGeometry ) return "PlaneGeometry";
-		if ( geometry instanceof THREE.PolyhedronGeometry ) return "PolyhedronGeometry";
-		if ( geometry instanceof THREE.SphereGeometry ) return "SphereGeometry";
-		if ( geometry instanceof THREE.TetrahedronGeometry ) return "TetrahedronGeometry";
-		if ( geometry instanceof THREE.TextGeometry ) return "TextGeometry";
-		if ( geometry instanceof THREE.TorusGeometry ) return "TorusGeometry";
-		if ( geometry instanceof THREE.TorusKnotGeometry ) return "TorusKnotGeometry";
-		if ( geometry instanceof THREE.TubeGeometry ) return "TubeGeometry";
-		if ( geometry instanceof THREE.Geometry ) return "Geometry";
+		var geometries = {
+
+			"ConvexGeometry": THREE.ConvexGeometry,
+			"CubeGeometry": THREE.CubeGeometry,
+			"CylinderGeometry": THREE.CylinderGeometry,
+			"ExtrudeGeometry": THREE.ExtrudeGeometry,
+			"IcosahedronGeometry": THREE.IcosahedronGeometry,
+			"LatheGeometry": THREE.LatheGeometry,
+			"OctahedronGeometry": THREE.OctahedronGeometry,
+			"ParametricGeometry": THREE.ParametricGeometry,
+			"PlaneGeometry": THREE.PlaneGeometry,
+			"PolyhedronGeometry": THREE.PolyhedronGeometry,
+			"SphereGeometry": THREE.SphereGeometry,
+			"TetrahedronGeometry": THREE.TetrahedronGeometry,
+			"TextGeometry": THREE.TextGeometry,
+			"TorusGeometry": THREE.TorusGeometry,
+			"TorusKnotGeometry": THREE.TorusKnotGeometry,
+			"TubeGeometry": THREE.TubeGeometry,
+			"Geometry": THREE.Geometry
+
+		};
+
+		for ( var key in geometries ) {
+
+			if ( geometry instanceof geometries[ key ] ) return key;
+
+		}
 
 	}
 
@@ -110,8 +118,8 @@ Sidebar.Properties.Geometry = function ( signals ) {
 			var hasFaceVertexColor = face.vertexColors[ 0 ] !== undefined;
 
 			var faceType = 0;
-			
-			faceType = setBit( faceType, 0, ! isTriangle );			
+
+			faceType = setBit( faceType, 0, ! isTriangle );
 			// faceType = setBit( faceType, 1, hasMaterial );
 			// faceType = setBit( faceType, 2, hasFaceUv );
 			// faceType = setBit( faceType, 3, hasFaceVertexUv );

gui/js/ui/Sidebar.Properties.Material.js

@@ -1,51 +1,68 @@
 Sidebar.Properties.Material = function ( signals ) {
 
+	var materials = {
+
+		'LineBasicMaterial': THREE.LineBasicMaterial,
+		'MeshBasicMaterial': THREE.MeshBasicMaterial,
+		'MeshDepthMaterial': THREE.MeshDepthMaterial,
+		'MeshFaceMaterial': THREE.MeshFaceMaterial,
+		'MeshLambertMaterial': THREE.MeshLambertMaterial,
+		'MeshNormalMaterial': THREE.MeshNormalMaterial,
+		'MeshPhongMaterial': THREE.MeshPhongMaterial,
+		'ParticleBasicMaterial': THREE.ParticleBasicMaterial,
+		'ParticleCanvasMaterial': THREE.ParticleCanvasMaterial,
+		'ParticleDOMMaterial': THREE.ParticleDOMMaterial,
+		'ShaderMaterial': THREE.ShaderMaterial,
+		'Material': THREE.Material
+
+	};
+
 	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
-	container.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
-	container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
 	var materialName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 	container.add( materialName );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Class' ).setColor( '#666' ) );
-	var materialClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
+	container.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
+	var materialClass = new UI.Select( 'absolute' ).setOptions( [ 'LineBasicMaterial', 'MeshBasicMaterial', 'MeshDepthMaterial', 'MeshFaceMaterial', 'MeshLambertMaterial', 'MeshNormalMaterial', 'MeshPhongMaterial', 'ParticleBasicMaterial', 'ParticleCanvasMaterial', 'ParticleDOMMaterial', 'ShaderMaterial' ] ).setLeft( '90px' ).setWidth( '180px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 	container.add( materialClass );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Color' ).setColor( '#666' ) );
-	
+	container.add( new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
+
 	var materialColor = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
 	container.add( materialColor );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Ambient' ).setColor( '#666' ) );
-	
+	container.add( new UI.Text().setValue( 'Ambient' ).setColor( '#666' ) );
+
 	var materialAmbient = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
 	container.add( materialAmbient );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Specular' ).setColor( '#666' ) );
-	
+	container.add( new UI.Text().setValue( 'Specular' ).setColor( '#666' ) );
+
 	var materialSpecular = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
 	container.add( materialSpecular );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Map' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
 	var materialMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 	container.add( materialMap );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Opacity' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Opacity' ).setColor( '#666' ) );
 	var materialOpacity = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setMin( 0 ).setMax( 1 ).onChange( update );
 	container.add( materialOpacity );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Transparent' ).setColor( '#666' ) );
-	var materialTransparent = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
+	container.add( new UI.Text().setValue( 'Transparent' ).setColor( '#666' ) );
+	var materialTransparent = new UI.Boolean( 'absolute' ).setLeft( '90px' ).onChange( update );
 	container.add( materialTransparent );
 
 	//
@@ -54,25 +71,39 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	function update() {
 
-		if ( selected ) {
+		var material = selected.material;
+
+		if ( material ) {
+
+			if ( material instanceof materials[ materialClass.getValue() ] == false ) {
+
+				material = new materials[ materialClass.getValue() ];
+				selected.material = material;
+
+			}
+
+			if ( material.color ) {
+
+				material.color.setHex( parseInt( materialColor.getValue().substr( 1 ), 16 ) );
 
-			selected.color.setHex( parseInt( materialColor.getValue().substr( 1 ), 16 ) );
+			}
 
-			if ( selected.ambient ) {
+			if ( material.ambient ) {
 
-				selected.ambient.setHex( parseInt( materialAmbient.getValue().substr( 1 ), 16 ) );
+				material.ambient.setHex( parseInt( materialAmbient.getValue().substr( 1 ), 16 ) );
 
 			}
 
-			if ( selected.specular ) {
+			if ( material.specular ) {
 
-				selected.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
+				material.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
 
 			}
 
-			selected.opacity = materialOpacity.getValue();
+			material.opacity = materialOpacity.getValue();
+			material.transparent = materialTransparent.getValue();
 
-			signals.materialChanged.dispatch( selected );
+			signals.materialChanged.dispatch( material );
 
 		}
 
@@ -82,18 +113,22 @@ Sidebar.Properties.Material = function ( signals ) {
 
 		if ( object && object.material ) {
 
-			selected = object.material;
+			selected = object;
 
 			container.setDisplay( 'block' );
 
-			materialName.setText( object.material.name );
-			materialClass.setText( getMaterialInstanceName( object.material ) );
-			materialColor.setValue( '#' + object.material.color.getHex().toString( 16 ) );
-			if ( object.material.ambient ) materialAmbient.setValue( '#' + object.material.ambient.getHex().toString( 16 ) );
-			if ( object.material.specular ) materialSpecular.setValue( '#' + object.material.specular.getHex().toString( 16 ) );
-			materialMap.setText( object.material.map );
-			materialOpacity.setValue( object.material.opacity );
-			materialTransparent.setText( object.material.transparent );
+			var material = object.material;
+
+			materialName.setValue( material.name );
+			materialClass.setValue( getMaterialInstanceName( material ) );
+
+			if ( material.color ) materialColor.setValue( '#' + material.color.getHex().toString( 16 ) );
+			if ( material.ambient ) materialAmbient.setValue( '#' + material.ambient.getHex().toString( 16 ) );
+			if ( material.specular ) materialSpecular.setValue( '#' + material.specular.getHex().toString( 16 ) );
+			if ( material.map ) materialMap.setValue( material.map );
+
+			materialOpacity.setValue( material.opacity );
+			materialTransparent.setValue( material.transparent );
 
 		} else {
 
@@ -107,20 +142,11 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	function getMaterialInstanceName( material ) {
 
-		// TODO: Is there a way of doing this automatically?
-
-		if ( material instanceof THREE.LineBasicMaterial ) return "LineBasicMaterial";
-		if ( material instanceof THREE.MeshBasicMaterial ) return "MeshBasicMaterial";
-		if ( material instanceof THREE.MeshDepthMaterial ) return "MeshDepthMaterial";
-		if ( material instanceof THREE.MeshFaceMaterial ) return "MeshFaceMaterial";
-		if ( material instanceof THREE.MeshLambertMaterial ) return "MeshLambertMaterial";
-		if ( material instanceof THREE.MeshNormalMaterial ) return "MeshNormalMaterial";
-		if ( material instanceof THREE.MeshPhongMaterial ) return "MeshPhongMaterial";
-		if ( material instanceof THREE.ParticleBasicMaterial ) return "ParticleBasicMaterial";
-		if ( material instanceof THREE.ParticleCanvasMaterial ) return "ParticleCanvasMaterial";
-		if ( material instanceof THREE.ParticleDOMMaterial ) return "ParticleDOMMaterial";
-		if ( material instanceof THREE.ShaderMaterial ) return "ShaderMaterial";
-		if ( material instanceof THREE.Material ) return "Material";
+		for ( var key in materials ) {
+
+			if ( material instanceof materials[ key ] ) return key;
+
+		}
 
 	}
 

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

@@ -3,29 +3,29 @@ Sidebar.Properties.Object3D = function ( signals ) {
 	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
-	container.add( new UI.Text().setText( 'OBJECT' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'OBJECT' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
-	container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
 	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' ) );
+	container.add( new UI.Text().setValue( 'Position' ).setColor( '#666' ) );
 	var positionX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
 	var positionY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
 	var positionZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
 	container.add( positionX, positionY, positionZ );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Rotation' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Rotation' ).setColor( '#666' ) );
 	var rotationX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
 	var rotationY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
 	var rotationZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
 	container.add( rotationX, rotationY, rotationZ );
 	container.add( new UI.HorizontalRule() );
 
-	container.add( new UI.Text().setText( 'Scale' ).setColor( '#666' ) );
+	container.add( new UI.Text().setValue( 'Scale' ).setColor( '#666' ) );
 	var scaleX = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
 	var scaleY = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
 	var scaleZ = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
@@ -66,7 +66,7 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 			container.setDisplay( 'block' );
 
-			objectName.setText( object.name );
+			objectName.setValue( object.name );
 
 			positionX.setValue( object.position.x );
 			positionY.setValue( object.position.y );

gui/js/ui/Viewport.js

@@ -46,7 +46,6 @@ 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;
@@ -56,10 +55,11 @@ 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();