Editor: Support for CircleGeometry.

editor/index.html

@@ -139,11 +139,12 @@
 		<script src="js/Sidebar.Object3D.js"></script>
 		<script src="js/Sidebar.Geometry.js"></script>
 		<script src="js/Sidebar.Animation.js"></script>
-		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
+		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CubeGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
-		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
+		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
+		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
 		<script src="js/Sidebar.Material.js"></script>

editor/js/Menubar.Add.js

@@ -73,6 +73,26 @@ Menubar.Add = function ( editor ) {
 	} );
 	options.add( option );
 
+	// add circle
+
+	var option = new UI.Panel();
+	option.setClass( 'option' );
+	option.setTextContent( 'Circle' );
+	option.onClick( function () {
+
+		var radius = 20;
+		var segments = 8;
+
+		var geometry = new THREE.CircleGeometry( radius, segments );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
+		mesh.name = 'Circle ' + ( ++ meshCount );
+
+		editor.addObject( mesh );
+		editor.select( mesh );
+
+	} );
+	options.add( option );
+
 	// add cylinder
 
 	var option = new UI.Panel();

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -0,0 +1,50 @@
+Sidebar.Geometry.CircleGeometry = 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 );
+
+	// segments
+
+	var segmentsRow = new UI.Panel();
+	var segments = new UI.Integer( geometry.segments ).onChange( update );
+
+	segmentsRow.add( new UI.Text( 'Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	segmentsRow.add( segments );
+
+	container.add( segmentsRow );
+
+	//
+
+	function update() {
+
+		delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
+
+		object.geometry.dispose();
+
+		object.geometry = new THREE.CircleGeometry(
+			radius.getValue(),
+			segments.getValue()
+		);
+
+		object.geometry.computeBoundingSphere();
+
+		signals.objectChanged.dispatch( object );
+
+	}
+
+	return container;
+
+}

editor/js/Sidebar.Geometry.js

@@ -121,9 +121,9 @@ Sidebar.Geometry = function ( editor ) {
 
 			}
 
-			if ( geometry instanceof THREE.PlaneGeometry ) {
+			if ( geometry instanceof THREE.CircleGeometry ) {
 
-				parameters = new Sidebar.Geometry.PlaneGeometry( signals, object );
+				parameters = new Sidebar.Geometry.CircleGeometry( signals, object );
 				container.add( parameters );
 
 			} else if ( geometry instanceof THREE.CubeGeometry ) {
@@ -146,6 +146,11 @@ Sidebar.Geometry = function ( editor ) {
 				parameters = new Sidebar.Geometry.IcosahedronGeometry( signals, object );
 				container.add( parameters );
 
+			} else if ( geometry instanceof THREE.PlaneGeometry ) {
+
+				parameters = new Sidebar.Geometry.PlaneGeometry( signals, object );
+				container.add( parameters );
+
 			} else if ( geometry instanceof THREE.TorusGeometry ) {
 
 				parameters = new Sidebar.Geometry.TorusGeometry( signals, object );

examples/js/exporters/ObjectExporter.js

@@ -60,6 +60,12 @@ THREE.ObjectExporter.prototype = {
 					data.heightSegments = geometry.heightSegments;
 					data.depthSegments = geometry.depthSegments;
 
+				} else if ( geometry instanceof THREE.CircleGeometry ) {
+
+					data.type = 'CircleGeometry';
+					data.radius = geometry.radius;
+					data.segments = geometry.segments;
+
 				} else if ( geometry instanceof THREE.CylinderGeometry ) {
 
 					data.type = 'CylinderGeometry';

src/extras/geometries/CircleGeometry.js

@@ -6,11 +6,11 @@ THREE.CircleGeometry = function ( radius, segments, thetaStart, thetaLength ) {
 
 	THREE.Geometry.call( this );
 
-	radius = radius || 50;
+	this.radius = radius = radius || 50;
+	this.segments = segments = segments !== undefined ? Math.max( 3, segments ) : 8;
 
-	thetaStart = thetaStart !== undefined ? thetaStart : 0;
-	thetaLength = thetaLength !== undefined ? thetaLength : Math.PI * 2;
-	segments = segments !== undefined ? Math.max( 3, segments ) : 8;
+	this.thetaStart = thetaStart = thetaStart !== undefined ? thetaStart : 0;
+	this.thetaLength = thetaLength = thetaLength !== undefined ? thetaLength : Math.PI * 2;
 
 	var i, uvs = [],
 	center = new THREE.Vector3(), centerUV = new THREE.Vector2( 0.5, 0.5 );

src/loaders/ObjectLoader.js

@@ -69,6 +69,15 @@ THREE.ObjectLoader.prototype = {
 
 						break;
 
+					case 'CircleGeometry':
+
+						geometry = new THREE.CircleGeometry(
+							data.radius,
+							data.segments
+						);
+
+						break;
+
 					case 'CubeGeometry':
 
 						geometry = new THREE.CubeGeometry(