Editor: CylinderGeometry parameters panel.

editor/index.html

@@ -105,6 +105,7 @@
 		<script src="js/ui/Sidebar.Geometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.PlaneGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.CubeGeometry.js"></script>
+		<script src="js/ui/Sidebar.Geometry.CylinderGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/ui/Sidebar.Material.js"></script>
 		<script src="js/ui/Viewport.js"></script>

editor/js/ui/Sidebar.Geometry.CylinderGeometry.js

@@ -0,0 +1,94 @@
+Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
+
+	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
+	container.setPaddingTop( '10px' );
+
+	var geometry = object.geometry;
+
+	// radiusTop
+
+	var radiusTopRow = new UI.Panel();
+	var radiusTop = new UI.Number( geometry.radiusTop ).onChange( update );
+
+	radiusTopRow.add( new UI.Text( 'Radius top' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusTopRow.add( radiusTop );
+
+	container.add( radiusTopRow );
+
+	// radiusBottom
+
+	var radiusBottomRow = new UI.Panel();
+	var radiusBottom = new UI.Number( geometry.radiusBottom ).onChange( update );
+
+	radiusBottomRow.add( new UI.Text( 'Radius bottom' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusBottomRow.add( radiusBottom );
+
+	container.add( radiusBottomRow );
+
+	// height
+
+	var heightRow = new UI.Panel();
+	var height = new UI.Number( geometry.height ).onChange( update );
+
+	heightRow.add( new UI.Text( 'Height' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightRow.add( height );
+
+	container.add( heightRow );
+
+	// radiusSegments
+
+	var radiusSegmentsRow = new UI.Panel();
+	var radiusSegments = new UI.Integer( geometry.radiusSegments ).setRange( 1, Infinity ).onChange( update );
+
+	radiusSegmentsRow.add( new UI.Text( 'Radius segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusSegmentsRow.add( radiusSegments );
+
+	container.add( radiusSegmentsRow );
+
+	// heightSegments
+
+	var heightSegmentsRow = new UI.Panel();
+	var heightSegments = new UI.Integer( geometry.heightSegments ).setRange( 1, Infinity ).onChange( update );
+
+	heightSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	heightSegmentsRow.add( heightSegments );
+
+	container.add( heightSegmentsRow );
+
+	// openEnded
+
+	var openEndedRow = new UI.Panel();
+	var openEnded = new UI.Checkbox( geometry.openEnded ).onChange( update );
+
+	openEndedRow.add( new UI.Text( 'Open ended' ).setWidth( '90px' ).setColor( '#666' ) );
+	openEndedRow.add( openEnded );
+
+	container.add( openEndedRow );
+
+	//
+
+	function update() {
+
+		delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
+
+		object.geometry.dispose();
+
+		object.geometry = new THREE.CylinderGeometry(
+			radiusTop.getValue(),
+			radiusBottom.getValue(),
+			height.getValue(),
+			radiusSegments.getValue(),
+			heightSegments.getValue(),
+			openEnded.getValue()
+		);
+
+		object.geometry.computeBoundingSphere();
+
+		signals.objectChanged.dispatch( object );
+
+	}
+
+	return container;
+
+}

editor/js/ui/Sidebar.Geometry.js

@@ -113,6 +113,11 @@ Sidebar.Geometry = function ( signals ) {
 				parameters = new Sidebar.Geometry.CubeGeometry( signals, object );
 				container.add( parameters );
 
+			} else if ( selected instanceof THREE.CylinderGeometry ) {
+
+				parameters = new Sidebar.Geometry.CylinderGeometry( signals, object );
+				container.add( parameters );
+
 			} else if ( selected instanceof THREE.TorusGeometry ) {
 
 				parameters = new Sidebar.Geometry.TorusGeometry( signals, object );

examples/js/exporters/SceneExporter2.js

@@ -57,6 +57,16 @@ THREE.SceneExporter2.prototype = {
 					data.heightSegments = geometry.heightSegments;
 					data.depthSegments = geometry.depthSegments;
 
+				} else if ( geometry instanceof THREE.CylinderGeometry ) {
+
+					data.type = 'CylinderGeometry';
+					data.radiusTop = geometry.radiusTop;
+					data.radiusBottom = geometry.radiusBottom;
+					data.height = geometry.height;
+					data.radiusSegments = geometry.radiusSegments;
+					data.heightSegments = geometry.heightSegments;
+					data.openEnded = data.openEnded;
+
 				} else if ( geometry instanceof THREE.SphereGeometry ) {
 
 					data.type = 'SphereGeometry';

examples/js/loaders/SceneLoader2.js

@@ -84,6 +84,19 @@ THREE.SceneLoader2.prototype = {
 
 					break;
 
+				case 'CylinderGeometry':
+
+					geometry = new THREE.CylinderGeometry(
+						data.radiusTop,
+						data.radiusBottom,
+						data.height,
+						data.radiusSegments,
+						data.heightSegments,
+						data.openEnded
+					);
+
+					break;
+
 				case 'SphereGeometry':
 
 					geometry = new THREE.SphereGeometry(

src/extras/geometries/CylinderGeometry.js

@@ -6,27 +6,30 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 
 	THREE.Geometry.call( this );
 
-	radiusTop = radiusTop !== undefined ? radiusTop : 20;
-	radiusBottom = radiusBottom !== undefined ? radiusBottom : 20;
-	height = height !== undefined ? height : 100;
+	this.radiusTop = radiusTop = radiusTop !== undefined ? radiusTop : 20;
+	this.radiusBottom = radiusBottom = radiusBottom !== undefined ? radiusBottom : 20;
+	this.height = height = height !== undefined ? height : 100;
+
+	this.radiusSegments = radiusSegments = radiusSegments || 8;
+	this.heightSegments = heightSegments = heightSegments || 1;
+
+	this.openEnded = openEnded = openEnded !== undefined ? openEnded : false;
 
 	var heightHalf = height / 2;
-	var segmentsX = radiusSegments || 8;
-	var segmentsY = heightSegments || 1;
 
 	var x, y, vertices = [], uvs = [];
 
-	for ( y = 0; y <= segmentsY; y ++ ) {
+	for ( y = 0; y <= heightSegments; y ++ ) {
 
 		var verticesRow = [];
 		var uvsRow = [];
 
-		var v = y / segmentsY;
+		var v = y / heightSegments;
 		var radius = v * ( radiusBottom - radiusTop ) + radiusTop;
 
-		for ( x = 0; x <= segmentsX; x ++ ) {
+		for ( x = 0; x <= radiusSegments; x ++ ) {
 
-			var u = x / segmentsX;
+			var u = x / radiusSegments;
 
 			var vertex = new THREE.Vector3();
 			vertex.x = radius * Math.sin( u * Math.PI * 2 );
@@ -48,7 +51,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 	var tanTheta = ( radiusBottom - radiusTop ) / height;
 	var na, nb;
 
-	for ( x = 0; x < segmentsX; x ++ ) {
+	for ( x = 0; x < radiusSegments; x ++ ) {
 
 		if ( radiusTop !== 0 ) {
 
@@ -65,7 +68,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 		na.setY( Math.sqrt( na.x * na.x + na.z * na.z ) * tanTheta ).normalize();
 		nb.setY( Math.sqrt( nb.x * nb.x + nb.z * nb.z ) * tanTheta ).normalize();
 
-		for ( y = 0; y < segmentsY; y ++ ) {
+		for ( y = 0; y < heightSegments; y ++ ) {
 
 			var v1 = vertices[ y ][ x ];
 			var v2 = vertices[ y + 1 ][ x ];
@@ -91,11 +94,11 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 
 	// top cap
 
-	if ( !openEnded && radiusTop > 0 ) {
+	if ( openEnded === false && radiusTop > 0 ) {
 
 		this.vertices.push( new THREE.Vector3( 0, heightHalf, 0 ) );
 
-		for ( x = 0; x < segmentsX; x ++ ) {
+		for ( x = 0; x < radiusSegments; x ++ ) {
 
 			var v1 = vertices[ 0 ][ x ];
 			var v2 = vertices[ 0 ][ x + 1 ];
@@ -118,11 +121,11 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegme
 
 	// bottom cap
 
-	if ( !openEnded && radiusBottom > 0 ) {
+	if ( openEnded === false && radiusBottom > 0 ) {
 
 		this.vertices.push( new THREE.Vector3( 0, - heightHalf, 0 ) );
 
-		for ( x = 0; x < segmentsX; x ++ ) {
+		for ( x = 0; x < radiusSegments; x ++ ) {
 
 			var v1 = vertices[ y ][ x + 1 ];
 			var v2 = vertices[ y ][ x ];