Geometry browser

docs/api/extras/geometries/BoxGeometry.html

@@ -13,6 +13,8 @@
 
 		<div class="desc">BoxGeometry is the quadrilateral primitive geometry class. It is typically used for creating a cube or irregular quadrilateral of the dimensions provided with the 'width', 'height', and 'depth' constructor arguments.</div>
 
+		<iframe src='../../../scenes/geometry-browser.html#BoxGeometry'></iframe>
+
 		<h2>Example</h2>
 
 		<code>var geometry = new THREE.BoxGeometry( 1, 1, 1 );

docs/api/extras/geometries/CircleGeometry.html

@@ -16,6 +16,8 @@
 		
 		<h2>Example</h2>
 
+		<iframe src='../../../scenes/geometry-browser.html#CircleGeometry'></iframe>
+
 		<code>var material = new THREE.MeshBasicMaterial({
 			color: 0x0000ff
 		});

docs/api/extras/geometries/CylinderGeometry.html

@@ -15,6 +15,8 @@
 
 
 		<h2>Example</h2>
+
+		<iframe src='../../../scenes/geometry-browser.html#CylinderGeometry'></iframe>
 		
 		<code>var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/extras/geometries/PlaneGeometry.html

@@ -15,6 +15,8 @@
 
 
 		<h2>Example</h2>
+
+		<iframe src='../../../scenes/geometry-browser.html#PlaneGeometry'></iframe>
 		
 		<code>var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );

docs/api/extras/geometries/RingGeometry.html

@@ -13,6 +13,8 @@
 
 		<div class="desc">A class for generating a two-dimensional ring geometry.</div>
 
+		<iframe src='../../../scenes/geometry-browser.html#RingGeometry'></iframe>
+
 		<h2>Example</h2>
 		
 		<code>var geometry = new THREE.RingGeometry( 1, 5, 32 );
@@ -29,7 +31,7 @@
 		innerRadius — Default is 0, but it doesn't work right when innerRadius is set to 0.<br />
 		outerRadius — Default is 50. <br />
 		thetaSegments — Number of segments.  A higher number means the ring will be more round.  Minimum is 3.  Default is 8. <br />
-		phiSegments — Minimum is 3.  Default is 8.<br />
+		phiSegments — Minimum is 1.  Default is 8.<br />
 		thetaStart — Starting angle. Default is 0. <br />
 		thetaLength — Central angle.  Default is Math.PI * 2.
 		</div>

docs/api/extras/geometries/SphereGeometry.html

@@ -14,6 +14,8 @@
 		<div class="desc">A class for generating sphere geometries</div>
 
 		<h2>Example</h2>
+
+		<iframe src='../../../scenes/geometry-browser.html#SphereGeometry'></iframe>
 		
 		<code>var geometry = new THREE.SphereGeometry( 5, 32, 32 );
 		var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

docs/api/extras/geometries/TextGeometry.html

@@ -13,6 +13,14 @@
 
 		<div class="desc">This object creates a 3D object of text as a single object.</div>
 
+		<h2>Example</h2>
+		
+		<iframe src='../../../scenes/geometry-browser.html#TextGeometry'></iframe>
+		
+		<div>
+		[example:webgl_geometry_text geometry / text ]<br/>
+		[example:webgl_geometry_text2 geometry / text2 ]
+		</div>
 
 		<h2>Constructor</h2>
 
@@ -24,7 +32,7 @@
 		<ul>
 			<li>size — Float. Size of the text.</li>
 			<li>height — Float. Thickness to extrude text.  Default is 50.</li>
-			<li>curveSegments — Integer. Number of points on the curves.</li>
+			<li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
 			<li>font — String. Font name.</li>
 			<li>weight — String. Font weight (normal, bold).</li>
 			<li>style —  String. Font style (normal, italics).</li>
@@ -34,7 +42,81 @@
 		</ul>
 		</div>
 		
-
+		<h2>Available Fonts</h2>
+		
+		<div>
+		TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.js</a> generated fonts.
+		Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
+		</div>
+		<table>
+			<tr>
+				<th>Font</th>
+				<th>Weight</th>
+				<th>Style</th>
+				<th>File Path</th>
+			</tr>
+			<tr>
+				<td>helvetiker</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/helvetiker_regular.typeface.js</td>
+			</tr>
+			<tr>
+				<td>helvetiker</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/helvetiker_bold.typeface.js</td>
+			</tr>
+			<tr>
+				<td>optimer</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/optimer_regular.typeface.js</td>
+			</tr>
+			<tr>
+				<td>optimer</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/optimer_bold.typeface.js</td>
+			</tr>
+			<tr>
+				<td>gentilis</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/gentilis_regular.typeface.js</td>
+			</tr>
+			<tr>
+				<td>gentilis</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/gentilis_bold.typeface.js</td>
+			</tr>
+			<tr>
+				<td>driod sans</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_sans_regular.typeface.js</td>
+			</tr>
+			<tr>
+				<td>driod sans</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_sans_bold.typeface.js</td>
+			</tr>
+			<tr>
+				<td>droid serif</td>
+				<td>normal</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_serif_regular.typeface.js</td>
+			</tr>
+			<tr>
+				<td>droid serif</td>
+				<td>bold</td>
+				<td>normal</td>
+				<td>/examples/fonts/droid/droid_serif_bold.typeface.js</td>
+			</tr>
+		</table>
+		
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

docs/scenes/geometry-browser.html

@@ -37,6 +37,15 @@
 		<script src="../../build/three.min.js"></script>
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 		<script src="../../examples/js/controls/OrbitControls.js"></script>
+		<script src="../../examples/fonts/gentilis_bold.typeface.js"></script>
+		<script src="../../examples/fonts/gentilis_regular.typeface.js"></script>
+		<script src="../../examples/fonts/optimer_bold.typeface.js"></script>
+		<script src="../../examples/fonts/optimer_regular.typeface.js"></script>
+		<script src="../../examples/fonts/helvetiker_bold.typeface.js"></script>
+		<script src="../../examples/fonts/helvetiker_regular.typeface.js"></script>
+		<script src="../../examples/fonts/droid/droid_serif_regular.typeface.js"></script>
+		<script src="../../examples/fonts/droid/droid_serif_bold.typeface.js"></script>
+		
 		<script src='js/geometry.js'></script>
 		
 		<script>
@@ -94,9 +103,9 @@
 					
 				]
 				
-			)
+			);
 			
-			chooseFromHash( mesh );
+			var options = chooseFromHash( mesh );
 			
 			scene.add( mesh );
 			
@@ -108,8 +117,10 @@
 
 				var time = Date.now() * 0.001;
 
-				mesh.rotation.x += 0.005;
-				mesh.rotation.y += 0.005;
+				if( !options.fixed ) {
+					mesh.rotation.x += 0.005;
+					mesh.rotation.y += 0.005;
+				}
 
 				renderer.render( scene, camera );
 				

docs/scenes/js/geometry.js

@@ -2,6 +2,8 @@
  * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
  */
 
+var twoPi = Math.PI * 2;
+
 var constants = {
 
 	combine: {
@@ -90,74 +92,112 @@ function updateGroupGeometry( mesh, geometry ) {
 }
 
 var guis = {
-	
-	TorusGeometry : function( mesh ) {
+
+	BoxGeometry : function( mesh ) {
 
 		var data = {
-			radius : 10,
-			tube : 3,
-			radialSegments : 16,
-			tubularSegments : 100,
-			arc : Math.PI * 2
+			width : 15,
+			height : 15,
+			depth : 15,
+			widthSegments : 1,
+			heightSegments : 1,
+			depthSegments : 1
 		};
 		
 		function generateGeometry() {
 			
 			updateGroupGeometry( mesh, 
-				new THREE.TorusGeometry(
-					data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
+				new THREE.BoxGeometry(
+					data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
 				)
-			)
+			);
 			
 		}
 
-		var folder = gui.addFolder('THREE.TorusGeometry');
+		var folder = gui.addFolder('THREE.BoxGeometry');
 		
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry )
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry )
-		folder.add( data, 'radialSegments', 2, 30 ).step(1).onChange( generateGeometry )
-		folder.add( data, 'tubularSegments', 3, 200 ).step(1).onChange( generateGeometry )
-		folder.add( data, 'arc', 0.1, Math.PI * 2 ).onChange( generateGeometry )
+		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'widthSegments', 1, 10 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'heightSegments', 1, 10 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'depthSegments', 1, 10 ).step(1).onChange( generateGeometry );
 		
-		generateGeometry()
-
+		generateGeometry();
 	},
-	
-	TorusKnotGeometry : function( mesh ) {
+
+	CylinderGeometry : function( mesh ) {
 
 		var data = {
-			radius : 10,
-			tube : 3,
-			radialSegments : 64,
-			tubularSegments : 8,
-			p : 2,
-			q : 3,
-			heightScale : 1
+			radiusTop : 5,
+			radiusBottom : 5,
+			height : 10,
+			radiusSegments : 8,
+			heightSegments : 1,
+			openEnded : false,
+			thetaStart : 0,
+			thetaLength : twoPi,
 		};
 		
 		function generateGeometry() {
 			
 			updateGroupGeometry( mesh, 
-				new THREE.TorusKnotGeometry(
-					data.radius, data.tube, data.radialSegments, data.tubularSegments,
-					data.p, data.q, data.heightScale
+				new THREE.CylinderGeometry(
+					data.radiusTop,
+					data.radiusBottom,
+					data.height,
+					data.radiusSegments,
+					data.heightSegments,
+					data.openEnded,
+					data.thetaStart,
+					data.thetaLength
 				)
 			)
 			
 		}
 
-		var folder = gui.addFolder('THREE.TorusGeometry');
+		var folder = gui.addFolder('THREE.CylinderGeometry');
 		
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry )
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry )
-		folder.add( data, 'radialSegments', 3, 300 ).step(1).onChange( generateGeometry )
-		folder.add( data, 'tubularSegments', 3, 20 ).step(1).onChange( generateGeometry )
-		folder.add( data, 'p', 1, 20 ).step(1).onChange( generateGeometry )
-		folder.add( data, 'q', 1, 20 ).step(1).onChange( generateGeometry )
-		folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry )
+		folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
+		folder.add( data, 'radiusSegments', 3, 64 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'heightSegments', 1, 64 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'openEnded' ).onChange( generateGeometry );
+		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
+		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
 		
-		generateGeometry()
+		
+		generateGeometry();
+	},
 
+	CircleGeometry : function( mesh ) {
+
+		var data = {
+			radius : 10,
+			segments : 32,
+			thetaStart : 0,
+			thetaLength : twoPi,
+		};
+		
+		function generateGeometry() {
+			
+			updateGroupGeometry( mesh, 
+				new THREE.CircleGeometry(
+					data.radius, data.segments, data.thetaStart, data.thetaLength
+				)
+			);
+			
+		}
+
+		var folder = gui.addFolder('THREE.CircleGeometry');
+		
+		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
+		folder.add( data, 'segments', 0, 128 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
+		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
+		
+		generateGeometry();
 	},
 	
 	DodecahedronGeometry : function() {
@@ -237,6 +277,103 @@ var guis = {
 		generateGeometry()
 		
 	},
+
+	PlaneGeometry : function( mesh ) {
+
+		var data = {
+			width : 10,
+			height : 10,
+			widthSegments : 1,
+			heightSegments : 1
+		};
+		
+		function generateGeometry() {
+			
+			updateGroupGeometry( mesh, 
+				new THREE.PlaneGeometry(
+					data.width, data.height, data.widthSegments, data.heightSegments
+				)
+			);
+			
+		}
+
+		var folder = gui.addFolder('THREE.PlaneGeometry');
+		
+		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'widthSegments', 1, 30 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'heightSegments', 1, 30 ).step(1).onChange( generateGeometry );
+		
+		generateGeometry();
+	},
+
+	RingGeometry : function( mesh ) {
+
+		var data = {
+			innerRadius : 5,
+			outerRadius : 10,
+			thetaSegments : 8,
+			phiSegments : 8,
+			thetaStart : 0,
+			thetaLength : twoPi,
+		};
+		
+		function generateGeometry() {
+			
+			updateGroupGeometry( mesh, 
+				new THREE.RingGeometry(
+					data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
+				)
+			);
+			
+		}
+
+		var folder = gui.addFolder('THREE.RingGeometry');
+		
+		folder.add( data, 'innerRadius', 0, 30 ).onChange( generateGeometry );
+		folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'thetaSegments', 1, 30 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'phiSegments', 1, 30 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
+		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
+		
+		generateGeometry();
+	},
+	
+	SphereGeometry : function( mesh ) {
+
+		var data = {
+			radius : 15,
+			widthSegments : 8,
+			heightSegments : 6,
+			phiStart : 0,
+			phiLength : twoPi,
+			thetaStart : 0,
+			thetaLength : Math.PI,
+		};
+		
+		function generateGeometry() {
+			
+			updateGroupGeometry( mesh, 
+				new THREE.SphereGeometry(
+					data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
+				)
+			);
+			
+		}
+
+		var folder = gui.addFolder('THREE.SphereGeometry');
+		
+		folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'widthSegments', 3, 32 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'heightSegments', 2, 32 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
+		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
+		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
+		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
+		
+		generateGeometry();
+	},
 	
 	TetrahedronGeometry : function() {
 
@@ -262,6 +399,130 @@ var guis = {
 		
 		generateGeometry()
 		
+	},
+	
+	TextGeometry : function( mesh ) {
+
+		var data = {
+			text : "TextGeometry",
+			size : 5,
+			height : 2,
+			curveSegments : 12,
+			font : "helvetiker",
+			weight : "normal",
+			style : "normal",
+			bevelEnabled : false,
+			bevelThickness : 1,
+			bevelSize : 0.5
+		};
+		
+		var fonts = [
+			"helvetiker",
+			"optimer",
+			"gentilis",
+			"droid serif"
+		]
+		
+		var weights = [
+			"normal", "bold"
+		]
+		
+		function generateGeometry() {
+			
+			var geometry = new THREE.TextGeometry( data.text, data )
+			
+			geometry.center()
+			
+			updateGroupGeometry( mesh, geometry );
+			
+		}
+		
+		//Hide the wireframe
+		mesh.children[0].visible = false;
+
+		var folder = gui.addFolder('THREE.TextGeometry');
+		
+		folder.add( data, 'text' ).onChange( generateGeometry );
+		folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
+		folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
+		folder.add( data, 'curveSegments', 1, 20 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'font', fonts ).onChange( generateGeometry );
+		folder.add( data, 'weight', weights ).onChange( generateGeometry );
+		// folder.add( data, 'style', 1, 1 ).onChange( generateGeometry );
+		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
+		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
+		folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
+		
+		generateGeometry();
+	},
+	
+	TorusGeometry : function( mesh ) {
+
+		var data = {
+			radius : 10,
+			tube : 3,
+			radialSegments : 16,
+			tubularSegments : 100,
+			arc : twoPi
+		};
+		
+		function generateGeometry() {
+			
+			updateGroupGeometry( mesh, 
+				new THREE.TorusGeometry(
+					data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
+				)
+			)
+			
+		}
+
+		var folder = gui.addFolder('THREE.TorusGeometry');
+		
+		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
+		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
+		folder.add( data, 'radialSegments', 2, 30 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'tubularSegments', 3, 200 ).step(1).onChange( generateGeometry );
+		folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
+		
+		generateGeometry();
+
+	},
+	
+	TorusKnotGeometry : function( mesh ) {
+
+		var data = {
+			radius : 10,
+			tube : 3,
+			radialSegments : 64,
+			tubularSegments : 8,
+			p : 2,
+			q : 3,
+			heightScale : 1
+		};
+		
+		function generateGeometry() {
+			
+			updateGroupGeometry( mesh, 
+				new THREE.TorusKnotGeometry(
+					data.radius, data.tube, data.radialSegments, data.tubularSegments,
+					data.p, data.q, data.heightScale
+				)
+			)
+			
+		}
+
+		var folder = gui.addFolder('THREE.TorusGeometry');
+		
+		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry )
+		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry )
+		folder.add( data, 'radialSegments', 3, 300 ).step(1).onChange( generateGeometry )
+		folder.add( data, 'tubularSegments', 3, 20 ).step(1).onChange( generateGeometry )
+		folder.add( data, 'p', 1, 20 ).step(1).onChange( generateGeometry )
+		folder.add( data, 'q', 1, 20 ).step(1).onChange( generateGeometry )
+		folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry )
+		
+		generateGeometry()
+
 	}
 	
 }
@@ -272,6 +533,52 @@ function chooseFromHash ( mesh ) {
 
 	switch (selectedGeometry) {
 
+	case "BoxGeometry" :
+
+		guis.BoxGeometry( mesh )
+
+		break;
+
+	case "CircleGeometry" :
+
+		guis.CircleGeometry( mesh )
+
+		break;
+
+	case "CylinderGeometry" :
+
+		guis.CylinderGeometry( mesh )
+
+		break;
+	
+	case "PlaneGeometry" :
+
+		guis.PlaneGeometry( mesh )
+
+		break;
+	
+	case "RingGeometry" :
+
+		guis.RingGeometry( mesh )
+
+		break;
+
+	case "SphereGeometry" :
+
+		guis.SphereGeometry( mesh )
+
+		break;
+
+	case "TextGeometry" :
+
+		guis.TextGeometry( mesh )
+
+		return {
+			fixed : true
+		};
+		
+		break;
+	
 	case "TorusGeometry" :
 
 		guis.TorusGeometry( mesh )
@@ -308,5 +615,8 @@ function chooseFromHash ( mesh ) {
 
 		break;
 	}
+	
+	//No configuration options
+	return {};
 
 }