Editor: SphereGeometry parameters panel.

editor/index.html

@@ -106,6 +106,7 @@
 		<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.SphereGeometry.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.CubeGeometry.js

@@ -41,7 +41,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var widthSegmentsRow = new UI.Panel();
 	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	widthSegmentsRow.add( new UI.Text( 'Width Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
 	widthSegmentsRow.add( widthSegments );
 
 	container.add( widthSegmentsRow );
@@ -51,7 +51,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	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( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );
@@ -61,7 +61,7 @@ Sidebar.Geometry.CubeGeometry = function ( signals, object ) {
 	var depthSegmentsRow = new UI.Panel();
 	var depthSegments = new UI.Integer( geometry.depthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	depthSegmentsRow.add( new UI.Text( 'Height Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	depthSegmentsRow.add( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
 	depthSegmentsRow.add( depthSegments );
 
 	container.add( depthSegmentsRow );

editor/js/ui/Sidebar.Geometry.PlaneGeometry.js

@@ -31,7 +31,7 @@ Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
 	var widthSegmentsRow = new UI.Panel();
 	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
 
-	widthSegmentsRow.add( new UI.Text( 'Width Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
 	widthSegmentsRow.add( widthSegments );
 
 	container.add( widthSegmentsRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
 	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( new UI.Text( 'Height segments' ).setWidth( '90px' ).setColor( '#666' ) );
 	heightSegmentsRow.add( heightSegments );
 
 	container.add( heightSegmentsRow );

editor/js/ui/Sidebar.Geometry.SphereGeometry.js

@@ -0,0 +1,106 @@
+Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
+
+	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
+	container.setPaddingTop( '10px' );
+
+	var geometry = object.geometry;
+
+	// radius
+
+	var radiusRow = new UI.Panel();
+	var radius = new UI.Number( geometry.radius ).onChange( update );
+
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// widthSegments
+
+	var widthSegmentsRow = new UI.Panel();
+	var widthSegments = new UI.Integer( geometry.widthSegments ).setRange( 1, Infinity ).onChange( update );
+
+	widthSegmentsRow.add( new UI.Text( 'Width segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	widthSegmentsRow.add( widthSegments );
+
+	container.add( widthSegmentsRow );
+
+	// 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 );
+
+	// phiStart
+
+	var phiStartRow = new UI.Panel();
+	var phiStart = new UI.Number( geometry.phiStart ).onChange( update );
+
+	phiStartRow.add( new UI.Text( 'Phi start' ).setWidth( '90px' ).setColor( '#666' ) );
+	phiStartRow.add( phiStart );
+
+	container.add( phiStartRow );
+
+	// phiLength
+
+	var phiLengthRow = new UI.Panel();
+	var phiLength = new UI.Number( geometry.phiLength ).onChange( update );
+
+	phiLengthRow.add( new UI.Text( 'Phi length' ).setWidth( '90px' ).setColor( '#666' ) );
+	phiLengthRow.add( phiLength );
+
+	container.add( phiLengthRow );
+
+	// thetaStart
+
+	var thetaStartRow = new UI.Panel();
+	var thetaStart = new UI.Number( geometry.thetaStart ).onChange( update );
+
+	thetaStartRow.add( new UI.Text( 'Theta start' ).setWidth( '90px' ).setColor( '#666' ) );
+	thetaStartRow.add( thetaStart );
+
+	container.add( thetaStartRow );
+
+	// thetaLength
+
+	var thetaLengthRow = new UI.Panel();
+	var thetaLength = new UI.Number( geometry.thetaLength ).onChange( update );
+
+	thetaLengthRow.add( new UI.Text( 'Theta length' ).setWidth( '90px' ).setColor( '#666' ) );
+	thetaLengthRow.add( thetaLength );
+
+	container.add( thetaLengthRow );
+
+
+	//
+
+	function update() {
+
+		delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
+
+		object.geometry.dispose();
+
+		object.geometry = new THREE.SphereGeometry(
+			radius.getValue(),
+			widthSegments.getValue(),
+			heightSegments.getValue(),
+			phiStart.getValue(),
+			phiLength.getValue(),
+			thetaStart.getValue(),
+			thetaLength.getValue()
+		);
+
+		object.geometry.computeBoundingSphere();
+
+		signals.objectChanged.dispatch( object );
+
+	}
+
+	return container;
+
+}

editor/js/ui/Sidebar.Geometry.TorusGeometry.js

@@ -31,7 +31,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 	var radialSegmentsRow = new UI.Panel();
 	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
 
-	radialSegmentsRow.add( new UI.Text( 'Radial Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
 	radialSegmentsRow.add( radialSegments );
 
 	container.add( radialSegmentsRow );
@@ -41,7 +41,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 	var tubularSegmentsRow = new UI.Panel();
 	var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
 
-	tubularSegmentsRow.add( new UI.Text( 'Tubular Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
 	tubularSegmentsRow.add( tubularSegments );
 
 	container.add( tubularSegmentsRow );

editor/js/ui/Sidebar.Geometry.js

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

src/extras/geometries/SphereGeometry.js

@@ -6,33 +6,33 @@ THREE.SphereGeometry = function ( radius, widthSegments, heightSegments, phiStar
 
 	THREE.Geometry.call( this );
 
-	this.radius = radius || 50;
+	this.radius = radius = radius || 50;
 
-	this.widthSegments = Math.max( 3, Math.floor( widthSegments ) || 8 );
-	this.heightSegments = Math.max( 2, Math.floor( heightSegments ) || 6 );
+	this.widthSegments = widthSegments = Math.max( 3, Math.floor( widthSegments ) || 8 );
+	this.heightSegments = heightSegments = Math.max( 2, Math.floor( heightSegments ) || 6 );
 
-	phiStart = phiStart !== undefined ? phiStart : 0;
-	phiLength = phiLength !== undefined ? phiLength : Math.PI * 2;
+	this.phiStart = phiStart = phiStart !== undefined ? phiStart : 0;
+	this.phiLength = phiLength = phiLength !== undefined ? phiLength : Math.PI * 2;
 
-	thetaStart = thetaStart !== undefined ? thetaStart : 0;
-	thetaLength = thetaLength !== undefined ? thetaLength : Math.PI;
+	this.thetaStart = thetaStart = thetaStart !== undefined ? thetaStart : 0;
+	this.thetaLength = thetaLength = thetaLength !== undefined ? thetaLength : Math.PI;
 
 	var x, y, vertices = [], uvs = [];
 
-	for ( y = 0; y <= this.heightSegments; y ++ ) {
+	for ( y = 0; y <= heightSegments; y ++ ) {
 
 		var verticesRow = [];
 		var uvsRow = [];
 
-		for ( x = 0; x <= this.widthSegments; x ++ ) {
+		for ( x = 0; x <= widthSegments; x ++ ) {
 
-			var u = x / this.widthSegments;
-			var v = y / this.heightSegments;
+			var u = x / widthSegments;
+			var v = y / heightSegments;
 
 			var vertex = new THREE.Vector3();
-			vertex.x = - this.radius * Math.cos( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );
-			vertex.y = this.radius * Math.cos( thetaStart + v * thetaLength );
-			vertex.z = this.radius * Math.sin( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );
+			vertex.x = - radius * Math.cos( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );
+			vertex.y = radius * Math.cos( thetaStart + v * thetaLength );
+			vertex.z = radius * Math.sin( phiStart + u * phiLength ) * Math.sin( thetaStart + v * thetaLength );
 
 			this.vertices.push( vertex );
 
@@ -89,7 +89,7 @@ THREE.SphereGeometry = function ( radius, widthSegments, heightSegments, phiStar
 	this.computeCentroids();
 	this.computeFaceNormals();
 
-    this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius );
+	this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius );
 
 };