GUI: More clean up. And added object visibility toggle.

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

@@ -1,5 +1,27 @@
 Sidebar.Properties.Geometry = function ( signals ) {
 
+	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
+
+	};
+
 	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
@@ -7,24 +29,46 @@ Sidebar.Properties.Geometry = function ( signals ) {
 	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().setValue( 'Name' ).setColor( '#666' ) );
+	// name
+
+	var geometryNameRow = new UI.Panel();
 	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().setValue( 'Class' ).setColor( '#666' ) );
+	geometryNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
+	geometryNameRow.add( geometryName );
+
+	container.add( geometryNameRow );
+
+	// class
+
+	var geometryClassRow = new UI.Panel();
 	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().setValue( 'Vertices' ).setColor( '#666' ) );
-	var verticesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
-	container.add( verticesCount );
-	container.add( new UI.HorizontalRule() );
+	geometryClassRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
+	geometryClassRow.add( geometryClass );
+
+	container.add( geometryClassRow );
+
+	// vertices
+
+	var geometryVerticesRow = new UI.Panel();
+	var geometryVertices = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
+
+	geometryVerticesRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
+	geometryVerticesRow.add( geometryVertices );
+
+	container.add( geometryVerticesRow );
+
+	// faces
+
+	var geometryFacesRow = new UI.Panel();
+	var geometryFaces = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
+
+	geometryFacesRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
+	geometryFacesRow.add( geometryFaces );
+
+	container.add( geometryFacesRow );
 
-	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() );
 
 	//
@@ -41,8 +85,8 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 			geometryName.setValue( object.geometry.name );
 			geometryClass.setValue( getGeometryInstanceName( object.geometry ) );
-			verticesCount.setValue( object.geometry.vertices.length );
-			facesCount.setValue( object.geometry.faces.length );
+			geometryVertices.setValue( object.geometry.vertices.length );
+			geometryFaces.setValue( object.geometry.faces.length );
 
 		} else {
 
@@ -56,28 +100,6 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 	function getGeometryInstanceName( 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;

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

@@ -28,10 +28,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialNameRow = new UI.Panel();
 	var materialName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 
-	materialNameRow.add(
-		new UI.Text().setValue( 'Name' ).setColor( '#666' ),
-		materialName
-	);
+	materialNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
+	materialNameRow.add( materialName );
 
 	container.add( materialNameRow );
 
@@ -40,11 +38,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialClassRow = new UI.Panel();
 	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 );
 
-	materialClassRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Class' ).setColor( '#666' ),
-		materialClass
-	);
+	materialClassRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
+	materialClassRow.add( materialClass );
 
 	container.add( materialClassRow );
 
@@ -53,11 +48,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialColorRow = new UI.Panel();
 	var materialColor = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
 
-	materialColorRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Color' ).setColor( '#666' ),
-		materialColor
-	);
+	materialColorRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
+	materialColorRow.add( materialColor );
 
 	container.add( materialColorRow );
 
@@ -66,11 +58,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialAmbientRow = new UI.Panel();
 	var materialAmbient = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
 
-	materialAmbientRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Ambient' ).setColor( '#666' ),
-		materialAmbient
-	);
+	materialAmbientRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Ambient' ).setColor( '#666' ) );
+	materialAmbientRow.add( materialAmbient );
 
 	container.add( materialAmbientRow );
 
@@ -79,11 +68,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialSpecularRow = new UI.Panel();
 	var materialSpecular = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
 
-	materialSpecularRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Specular' ).setColor( '#666' ),
-		materialSpecular
-	);
+	materialSpecularRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Specular' ).setColor( '#666' ) );
+	materialSpecularRow.add( materialSpecular );
 
 	container.add( materialSpecularRow );
 
@@ -92,11 +78,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialMapRow = new UI.Panel();
 	var materialMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 
-	materialMapRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Map' ).setColor( '#666' ),
-		materialMap
-	);
+	materialMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
+	materialMapRow.add( materialMap );
 
 	container.add( materialSpecularRow );
 
@@ -105,11 +88,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialOpacityRow = new UI.Panel();
 	var materialOpacity = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
-	materialOpacityRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Opacity' ).setColor( '#666' ),
-		materialOpacity
-	);
+	materialOpacityRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Opacity' ).setColor( '#666' ) );
+	materialOpacityRow.add( materialOpacity );
 
 	container.add( materialOpacityRow );
 
@@ -118,11 +98,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialTransparentRow = new UI.Panel();
 	var materialTransparent = new UI.Boolean( 'absolute' ).setValue( false ).setLeft( '90px' ).onChange( update );
 
-	materialTransparentRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Transparent' ).setColor( '#666' ),
-		materialTransparent
-	);
+	materialTransparentRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Transparent' ).setColor( '#666' ) );
+	materialTransparentRow.add( materialTransparent );
 
 	container.add( materialTransparentRow );
 
@@ -131,11 +108,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialWireframeRow = new UI.Panel();
 	var materialWireframe = new UI.Boolean( 'absolute' ).setValue( false ).setLeft( '90px' ).onChange( update );
 
-	materialWireframeRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Wireframe' ).setColor( '#666' ),
-		materialWireframe
-	);
+	materialWireframeRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Wireframe' ).setColor( '#666' ) );
+	materialWireframeRow.add( materialWireframe );
 
 	container.add( materialWireframeRow );
 
@@ -144,11 +118,8 @@ Sidebar.Properties.Material = function ( signals ) {
 	var materialWireframeLinewidthRow = new UI.Panel();
 	var materialWireframeLinewidth = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setRange( 0, 100 ).onChange( update );
 
-	materialWireframeLinewidthRow.add(
-		new UI.HorizontalRule(),
-		new UI.Text().setValue( 'Linewidth' ).setColor( '#666' ),
-		materialWireframeLinewidth
-	);
+	materialWireframeLinewidthRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Linewidth' ).setColor( '#666' ) );
+	materialWireframeLinewidthRow.add( materialWireframeLinewidth );
 
 	container.add( materialWireframeLinewidthRow );
 

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

@@ -6,31 +6,63 @@ Sidebar.Properties.Object3D = function ( signals ) {
 	container.add( new UI.Text().setValue( 'OBJECT' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
-	container.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
+	// name
+
+	var objectNameRow = new UI.Panel();
 	var objectName = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' );
-	container.add( objectName );
-	container.add( new UI.HorizontalRule() );
-
-	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().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().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 );
-	container.add( scaleX, scaleY, scaleZ );
-	container.add( new UI.Break(), new UI.Break(), new UI.Break() );
+
+	objectNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
+	objectNameRow.add( objectName );
+
+	container.add( objectNameRow );
+
+	// position
+
+	var objectPositionRow = new UI.Panel();
+	var objectPositionX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
+	var objectPositionY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
+	var objectPositionZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
+
+	objectPositionRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Position' ).setColor( '#666' ) );
+	objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
+
+	container.add( objectPositionRow );
+
+	// rotation
+
+	var objectRotationRow = new UI.Panel();
+	var objectRotationX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
+	var objectRotationY = new UI.Number( 'absolute' ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
+	var objectRotationZ = new UI.Number( 'absolute' ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
+
+	objectRotationRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Rotation' ).setColor( '#666' ) );
+	objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
+
+	container.add( objectRotationRow );
+
+	// scale
+
+	var objectScaleRow = new UI.Panel();
+	var objectScaleX = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
+	var objectScaleY = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '150px' ).setWidth( '50px' ).onChange( update );
+	var objectScaleZ = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '210px' ).setWidth( '50px' ).onChange( update );
+
+	objectScaleRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Scale' ).setColor( '#666' ) );
+	objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
+
+	container.add( objectScaleRow );
+
+	// visible
+
+	var objectVisibleRow = new UI.Panel();
+	var objectVisible = new UI.Boolean( 'absolute' ).setLeft( '90px' ).setWidth( '50px' ).onChange( update );
+
+	objectVisibleRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Visible' ).setColor( '#666' ) );
+	objectVisibleRow.add( objectVisible );
+
+	container.add( objectVisibleRow );
+
+	container.add( new UI.Break(), new UI.Break() );
 
 	//
 
@@ -40,17 +72,19 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 		if ( selected ) {
 
-			selected.position.x = positionX.getValue();
-			selected.position.y = positionY.getValue();
-			selected.position.z = positionZ.getValue();
+			selected.position.x = objectPositionX.getValue();
+			selected.position.y = objectPositionY.getValue();
+			selected.position.z = objectPositionZ.getValue();
 
-			selected.rotation.x = rotationX.getValue();
-			selected.rotation.y = rotationY.getValue();
-			selected.rotation.z = rotationZ.getValue();
+			selected.rotation.x = objectRotationX.getValue();
+			selected.rotation.y = objectRotationY.getValue();
+			selected.rotation.z = objectRotationZ.getValue();
 
-			selected.scale.x = scaleX.getValue();
-			selected.scale.y = scaleY.getValue();
-			selected.scale.z = scaleZ.getValue();
+			selected.scale.x = objectScaleX.getValue();
+			selected.scale.y = objectScaleY.getValue();
+			selected.scale.z = objectScaleZ.getValue();
+
+			selected.visible = objectVisible.getValue();
 
 			signals.objectChanged.dispatch( selected );
 
@@ -68,17 +102,19 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 			objectName.setValue( object.name );
 
-			positionX.setValue( object.position.x );
-			positionY.setValue( object.position.y );
-			positionZ.setValue( object.position.z );
+			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 );
 
-			rotationX.setValue( object.rotation.x );
-			rotationY.setValue( object.rotation.y );
-			rotationZ.setValue( object.rotation.z );
+			objectScaleX.setValue( object.scale.x );
+			objectScaleY.setValue( object.scale.y );
+			objectScaleZ.setValue( object.scale.z );
 
-			scaleX.setValue( object.scale.x );
-			scaleY.setValue( object.scale.y );
-			scaleZ.setValue( object.scale.z );
+			objectVisible.setValue( object.visible );
 
 		} else {