midas
/
threejs-obj-space


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Three.js Geometry Browser</title>
		<link rel="shortcut icon" href="../../files/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../files/main.css">
		<style>
			canvas {
				display: block;
				width: 100%;
				height: 100%;
			}

			#newWindow {
				display: block;
				position: absolute;
				bottom: 0.3em;
				left: 0.5em;
				color: #fff;
			}
		</style>
	</head>
	<body>

		<a id='newWindow' href='./geometry-browser.html' target='_blank'>Open in New Window</a>

		<script type="module">
			import {
				BoxGeometry, BoxBufferGeometry,
				BufferGeometry,
				CircleGeometry, CircleBufferGeometry,
				Color,
				ConeGeometry, ConeBufferGeometry,
				Curve,
				CylinderGeometry, CylinderBufferGeometry,
				DodecahedronGeometry, DodecahedronBufferGeometry,
				DoubleSide,
				ExtrudeGeometry, ExtrudeBufferGeometry,
				Float32BufferAttribute,
				FontLoader,
				Group,
				IcosahedronGeometry, IcosahedronBufferGeometry,
				LatheGeometry, LatheBufferGeometry,
				LineSegments,
				LineBasicMaterial,
				Mesh,
				MeshPhongMaterial,
				OctahedronGeometry, OctahedronBufferGeometry,
				ParametricGeometry, ParametricBufferGeometry,
				PerspectiveCamera,
				PlaneGeometry, PlaneBufferGeometry,
				PointLight,
				RingGeometry, RingBufferGeometry,
				Scene,
				Shape,
				ShapeGeometry, ShapeBufferGeometry,
				SphereGeometry, SphereBufferGeometry,
				TetrahedronGeometry, TetrahedronBufferGeometry,
				TextGeometry, TextBufferGeometry,
				TorusGeometry, TorusBufferGeometry,
				TorusKnotGeometry, TorusKnotBufferGeometry,
				TubeGeometry, TubeBufferGeometry,
				Vector2,
				Vector3,
				WireframeGeometry,
				WebGLRenderer
			} from "../../build/three.module.js";

			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
			import { ParametricGeometries } from '../../examples/jsm/geometries/ParametricGeometries.js';

			/**
			 * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
			 */

			var twoPi = Math.PI * 2;

			function updateGroupGeometry( mesh, geometry ) {

				if ( geometry.isGeometry ) {

					geometry = new BufferGeometry().fromGeometry( geometry );

					console.warn( 'THREE.GeometryBrowser: Converted Geometry to BufferGeometry.' );

				}

				mesh.children[ 0 ].geometry.dispose();
				mesh.children[ 1 ].geometry.dispose();

				mesh.children[ 0 ].geometry = new WireframeGeometry( geometry );
				mesh.children[ 1 ].geometry = geometry;

				// these do not update nicely together if shared

			}

			function CustomSinCurve( scale ) {

				Curve.call( this );

				this.scale = ( scale === undefined ) ? 1 : scale;

			}

			CustomSinCurve.prototype = Object.create( Curve.prototype );
			CustomSinCurve.prototype.constructor = CustomSinCurve;

			CustomSinCurve.prototype.getPoint = function ( t ) {

				var tx = t * 3 - 1.5;
				var ty = Math.sin( 2 * Math.PI * t );
				var tz = 0;

				return new Vector3( tx, ty, tz ).multiplyScalar( this.scale );

			};

			// heart shape

			var x = 0, y = 0;

			var heartShape = new Shape();

			heartShape.moveTo( x + 5, y + 5 );
			heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
			heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7, x - 6, y + 7 );
			heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
			heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
			heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
			heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

			var guis = {

				BoxBufferGeometry: function ( mesh ) {

					var data = {
						width: 15,
						height: 15,
						depth: 15,
						widthSegments: 1,
						heightSegments: 1,
						depthSegments: 1
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new BoxBufferGeometry(
								data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
							)
						);

					}

					var folder = gui.addFolder( 'THREE.BoxBufferGeometry' );

					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();

				},

				BoxGeometry: function ( mesh ) {

					var data = {
						width: 15,
						height: 15,
						depth: 15,
						widthSegments: 1,
						heightSegments: 1,
						depthSegments: 1
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new BoxGeometry(
								data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
							)
						);

					}

					var folder = gui.addFolder( 'THREE.BoxGeometry' );

					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();

				},

				CylinderBufferGeometry: function ( mesh ) {

					var data = {
						radiusTop: 5,
						radiusBottom: 5,
						height: 10,
						radialSegments: 8,
						heightSegments: 1,
						openEnded: false,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new CylinderBufferGeometry(
								data.radiusTop,
								data.radiusBottom,
								data.height,
								data.radialSegments,
								data.heightSegments,
								data.openEnded,
								data.thetaStart,
								data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.CylinderBufferGeometry' );

					folder.add( data, 'radiusTop', 0, 30 ).onChange( generateGeometry );
					folder.add( data, 'radiusBottom', 0, 30 ).onChange( generateGeometry );
					folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 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();

				},

				CylinderGeometry: function ( mesh ) {

					var data = {
						radiusTop: 5,
						radiusBottom: 5,
						height: 10,
						radialSegments: 8,
						heightSegments: 1,
						openEnded: false,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new CylinderGeometry(
								data.radiusTop,
								data.radiusBottom,
								data.height,
								data.radialSegments,
								data.heightSegments,
								data.openEnded,
								data.thetaStart,
								data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.CylinderGeometry' );

					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, 'radialSegments', 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();

				},

				ConeBufferGeometry: function ( mesh ) {

					var data = {
						radius: 5,
						height: 10,
						radialSegments: 8,
						heightSegments: 1,
						openEnded: false,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new ConeBufferGeometry(
								data.radius,
								data.height,
								data.radialSegments,
								data.heightSegments,
								data.openEnded,
								data.thetaStart,
								data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.ConeBufferGeometry' );

					folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
					folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 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();

				},

				ConeGeometry: function ( mesh ) {

					var data = {
						radius: 5,
						height: 10,
						radialSegments: 8,
						heightSegments: 1,
						openEnded: false,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new ConeGeometry(
								data.radius,
								data.height,
								data.radialSegments,
								data.heightSegments,
								data.openEnded,
								data.thetaStart,
								data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.ConeGeometry' );

					folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
					folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 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();

				},


				CircleBufferGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						segments: 32,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new CircleBufferGeometry(
								data.radius, data.segments, data.thetaStart, data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.CircleBufferGeometry' );

					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();

				},

				CircleGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						segments: 32,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new 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 ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new DodecahedronGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.DodecahedronGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				DodecahedronBufferGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new DodecahedronBufferGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.DodecahedronBufferGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				IcosahedronGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new IcosahedronGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				IcosahedronBufferGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new IcosahedronBufferGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.IcosahedronBufferGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				LatheBufferGeometry: function ( mesh ) {

					var points = [];

					for ( var i = 0; i < 10; i ++ ) {

						points.push( new Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );

					}

					var data = {
						segments: 12,
						phiStart: 0,
						phiLength: twoPi
					};

					function generateGeometry() {

						var geometry = new LatheBufferGeometry(
							points, data.segments, data.phiStart, data.phiLength
						);

						updateGroupGeometry( mesh, geometry );

					}

					var folder = gui.addFolder( 'THREE.LatheBufferGeometry' );

					folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
					folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );

					generateGeometry();

				},

				LatheGeometry: function ( mesh ) {

					var points = [];

					for ( var i = 0; i < 10; i ++ ) {

						points.push( new Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );

					}

					var data = {
						segments: 12,
						phiStart: 0,
						phiLength: twoPi
					};

					function generateGeometry() {

						var geometry = new LatheGeometry(
							points, data.segments, data.phiStart, data.phiLength
						);

						updateGroupGeometry( mesh, geometry );

					}

					var folder = gui.addFolder( 'THREE.LatheGeometry' );

					folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
					folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );

					generateGeometry();

				},

				OctahedronGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new OctahedronGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.OctahedronGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				OctahedronBufferGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new OctahedronBufferGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.OctahedronBufferGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				PlaneBufferGeometry: function ( mesh ) {

					var data = {
						width: 10,
						height: 10,
						widthSegments: 1,
						heightSegments: 1
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new PlaneBufferGeometry(
								data.width, data.height, data.widthSegments, data.heightSegments
							)
						);

					}

					var folder = gui.addFolder( 'THREE.PlaneBufferGeometry' );

					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();

				},

				PlaneGeometry: function ( mesh ) {

					var data = {
						width: 10,
						height: 10,
						widthSegments: 1,
						heightSegments: 1
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new 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();

				},

				RingBufferGeometry: function ( mesh ) {

					var data = {
						innerRadius: 5,
						outerRadius: 10,
						thetaSegments: 8,
						phiSegments: 8,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new RingBufferGeometry(
								data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.RingBufferGeometry' );

					folder.add( data, 'innerRadius', 1, 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();

				},

				RingGeometry: function ( mesh ) {

					var data = {
						innerRadius: 5,
						outerRadius: 10,
						thetaSegments: 8,
						phiSegments: 8,
						thetaStart: 0,
						thetaLength: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new RingGeometry(
								data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.RingGeometry' );

					folder.add( data, 'innerRadius', 1, 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();

				},

				SphereBufferGeometry: function ( mesh ) {

					var data = {
						radius: 15,
						widthSegments: 8,
						heightSegments: 6,
						phiStart: 0,
						phiLength: twoPi,
						thetaStart: 0,
						thetaLength: Math.PI
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new SphereBufferGeometry(
								data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
							)
						);

					}

					var folder = gui.addFolder( 'THREE.SphereBufferGeometry' );

					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();

				},

				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 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 ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new TetrahedronGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				TetrahedronBufferGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						detail: 0
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new TetrahedronBufferGeometry(
								data.radius, data.detail
							)
						);

					}

					var folder = gui.addFolder( 'THREE.TetrahedronBufferGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				TextGeometry: function ( mesh ) {

					var data = {
						text: "TextGeometry",
						size: 5,
						height: 2,
						curveSegments: 12,
						font: "helvetiker",
						weight: "regular",
						bevelEnabled: false,
						bevelThickness: 1,
						bevelSize: 0.5,
						bevelOffset: 0.0,
						bevelSegments: 3
					};

					var fonts = [
						"helvetiker",
						"optimer",
						"gentilis",
						"droid/droid_serif"
					];

					var weights = [
						"regular", "bold"
					];

					function generateGeometry() {

						var loader = new FontLoader();
						loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {

							var geometry = new TextGeometry( data.text, {
								font: font,
								size: data.size,
								height: data.height,
								curveSegments: data.curveSegments,
								bevelEnabled: data.bevelEnabled,
								bevelThickness: data.bevelThickness,
								bevelSize: data.bevelSize,
								bevelOffset: data.bevelOffset,
								bevelSegments: data.bevelSegments
							} );
							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, 'bevelEnabled' ).onChange( generateGeometry );
					folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
					folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
					folder.add( data, 'bevelOffset', - 0.5, 1.5 ).onChange( generateGeometry );
					folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				TextBufferGeometry: function ( mesh ) {

					var data = {
						text: "TextBufferGeometry",
						size: 5,
						height: 2,
						curveSegments: 12,
						font: "helvetiker",
						weight: "regular",
						bevelEnabled: false,
						bevelThickness: 1,
						bevelSize: 0.5,
						bevelOffset: 0.0,
						bevelSegments: 3
					};

					var fonts = [
						"helvetiker",
						"optimer",
						"gentilis",
						"droid/droid_serif"
					];

					var weights = [
						"regular", "bold"
					];

					function generateGeometry() {

						var loader = new FontLoader();
						loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {

							var geometry = new TextBufferGeometry( data.text, {
								font: font,
								size: data.size,
								height: data.height,
								curveSegments: data.curveSegments,
								bevelEnabled: data.bevelEnabled,
								bevelThickness: data.bevelThickness,
								bevelSize: data.bevelSize,
								bevelOffset: data.bevelOffset,
								bevelSegments: data.bevelSegments
							} );
							geometry.center();

							updateGroupGeometry( mesh, geometry );

						} );

					}

					//Hide the wireframe
					mesh.children[ 0 ].visible = false;

					var folder = gui.addFolder( 'THREE.TextBufferGeometry' );

					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, 'bevelEnabled' ).onChange( generateGeometry );
					folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
					folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
					folder.add( data, 'bevelOffset', - 0.5, 1.5 ).onChange( generateGeometry );
					folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				TorusBufferGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						tube: 3,
						radialSegments: 16,
						tubularSegments: 100,
						arc: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new TorusBufferGeometry(
								data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
							)
						);

					}

					var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );

					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();

				},

				TorusGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						tube: 3,
						radialSegments: 16,
						tubularSegments: 100,
						arc: twoPi
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new 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();

				},

				TorusKnotBufferGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						tube: 3,
						tubularSegments: 64,
						radialSegments: 8,
						p: 2,
						q: 3
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new TorusKnotBufferGeometry(
								data.radius, data.tube, data.tubularSegments, data.radialSegments,
								data.p, data.q
							)
						);

					}

					var folder = gui.addFolder( 'THREE.TorusKnotBufferGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
					folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 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 );

					generateGeometry();

				},

				TorusKnotGeometry: function ( mesh ) {

					var data = {
						radius: 10,
						tube: 3,
						tubularSegments: 64,
						radialSegments: 8,
						p: 2,
						q: 3
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new TorusKnotGeometry(
								data.radius, data.tube, data.tubularSegments, data.radialSegments,
								data.p, data.q
							)
						);

					}

					var folder = gui.addFolder( 'THREE.TorusKnotGeometry' );

					folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
					folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 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 );

					generateGeometry();

				},

				ParametricBufferGeometry: function ( mesh ) {

					var data = {
						slices: 25,
						stacks: 25
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new ParametricBufferGeometry( ParametricGeometries.klein, data.slices, data.stacks )
						);

					}

					var folder = gui.addFolder( 'THREE.ParametricBufferGeometry' );

					folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				ParametricGeometry: function ( mesh ) {

					var data = {
						slices: 25,
						stacks: 25
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new ParametricGeometry( ParametricGeometries.klein, data.slices, data.stacks )
						);

					}

					var folder = gui.addFolder( 'THREE.ParametricGeometry' );

					folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				TubeGeometry: function ( mesh ) {

					var data = {
						segments: 20,
						radius: 2,
						radialSegments: 8
					};

					var path = new CustomSinCurve( 10 );

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new TubeGeometry( path, data.segments, data.radius, data.radialSegments, false )
						);

					}

					var folder = gui.addFolder( 'THREE.TubeGeometry' );

					folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				TubeBufferGeometry: function ( mesh ) {

					var data = {
						segments: 20,
						radius: 2,
						radialSegments: 8
					};

					var path = new CustomSinCurve( 10 );

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new TubeBufferGeometry( path, data.segments, data.radius, data.radialSegments, false )
						);

					}

					var folder = gui.addFolder( 'THREE.TubeBufferGeometry' );

					folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				ShapeGeometry: function ( mesh ) {

					var data = {
						segments: 12
					};

					function generateGeometry() {

						var geometry = new ShapeGeometry( heartShape, data.segments );
						geometry.center();

						updateGroupGeometry( mesh, geometry );

					}

					var folder = gui.addFolder( 'THREE.ShapeGeometry' );
					folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				ShapeBufferGeometry: function ( mesh ) {

					var data = {
						segments: 12
					};

					function generateGeometry() {

						var geometry = new ShapeBufferGeometry( heartShape, data.segments );
						geometry.center();

						updateGroupGeometry( mesh, geometry );

					}

					var folder = gui.addFolder( 'THREE.ShapeBufferGeometry' );
					folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				ExtrudeGeometry: function ( mesh ) {

					var data = {
						steps: 2,
						depth: 16,
						bevelEnabled: true,
						bevelThickness: 1,
						bevelSize: 1,
						bevelOffset: 0,
						bevelSegments: 1
					};

					var length = 12, width = 8;

					var shape = new Shape();
					shape.moveTo( 0, 0 );
					shape.lineTo( 0, width );
					shape.lineTo( length, width );
					shape.lineTo( length, 0 );
					shape.lineTo( 0, 0 );

					function generateGeometry() {

						var geometry = new ExtrudeGeometry( shape, data );
						geometry.center();

						updateGroupGeometry( mesh, geometry );

					}

					var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );

					folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'bevelOffset', - 4, 5 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				ExtrudeBufferGeometry: function ( mesh ) {

					var data = {
						steps: 2,
						depth: 16,
						bevelEnabled: true,
						bevelThickness: 1,
						bevelSize: 1,
						bevelOffset: 0,
						bevelSegments: 1
					};

					var length = 12, width = 8;

					var shape = new Shape();
					shape.moveTo( 0, 0 );
					shape.lineTo( 0, width );
					shape.lineTo( length, width );
					shape.lineTo( length, 0 );
					shape.lineTo( 0, 0 );

					function generateGeometry() {

						var geometry = new ExtrudeBufferGeometry( shape, data );
						geometry.center();

						updateGroupGeometry( mesh, geometry );

					}

					var folder = gui.addFolder( 'THREE.ExtrudeBufferGeometry' );

					folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
					folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'bevelOffset', - 4, 5 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				}

			};

			function chooseFromHash( mesh ) {

				var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";

				if ( guis[ selectedGeometry ] !== undefined ) {

					guis[ selectedGeometry ]( mesh );

				}

				if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {

					return { fixed: true };

				}

				//No configuration options
				return {};

			}

			//

			document.getElementById( 'newWindow' ).href += window.location.hash;

			var gui = new GUI();

			var scene = new Scene();
			scene.background = new Color( 0x444444 );

			var camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
			camera.position.z = 30;

			var renderer = new WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var orbit = new OrbitControls( camera, renderer.domElement );
			orbit.enableZoom = false;

			var lights = [];
			lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
			lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
			lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );

			lights[ 0 ].position.set( 0, 200, 0 );
			lights[ 1 ].position.set( 100, 200, 100 );
			lights[ 2 ].position.set( - 100, - 200, - 100 );

			scene.add( lights[ 0 ] );
			scene.add( lights[ 1 ] );
			scene.add( lights[ 2 ] );

			var group = new Group();

			var geometry = new BufferGeometry();
			geometry.setAttribute( 'position', new Float32BufferAttribute( [], 3 ) );

			var lineMaterial = new LineBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5 } );
			var meshMaterial = new MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: DoubleSide, flatShading: true } );

			group.add( new LineSegments( geometry, lineMaterial ) );
			group.add( new Mesh( geometry, meshMaterial ) );

			var options = chooseFromHash( group );

			scene.add( group );

			var render = function () {

				requestAnimationFrame( render );

				if ( ! options.fixed ) {

					group.rotation.x += 0.005;
					group.rotation.y += 0.005;

				}

				renderer.render( scene, camera );

			};

			window.addEventListener( 'resize', function () {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}, false );

			render();

		</script>
	</body>
</html>