javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812
							<!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>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "../../build/three.module.js",
					"three/addons/": "../../examples/jsm/"
				}
			}
		</script>

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

		<script type="module">
			import {
				BoxGeometry,
				BufferGeometry,
				CapsuleGeometry,
				CircleGeometry,
				Color,
				ColorManagement,
				ConeGeometry,
				Curve,
				CylinderGeometry,
				DodecahedronGeometry,
				DoubleSide,
				ExtrudeGeometry,
				Float32BufferAttribute,
				Group,
				IcosahedronGeometry,
				LatheGeometry,
				LineSegments,
				LineBasicMaterial,
				Mesh,
				MeshPhongMaterial,
				OctahedronGeometry,
				PerspectiveCamera,
				PlaneGeometry,
				PointLight,
				RingGeometry,
				Scene,
				Shape,
				ShapeGeometry,
				SphereGeometry,
				TetrahedronGeometry,
				TorusGeometry,
				TorusKnotGeometry,
				TubeGeometry,
				Vector2,
				Vector3,
				WireframeGeometry,
				WebGLRenderer
			} from 'three';

			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			ColorManagement.enabled = true;

			const twoPi = Math.PI * 2;

			class CustomSinCurve extends Curve {

				constructor( scale = 1 ) {

					super();

					this.scale = scale;

				}

				getPoint( t, optionalTarget = new Vector3() ) {

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

					return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );

				}

			}

			function updateGroupGeometry( mesh, geometry ) {

				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

			}

			// heart shape

			const x = 0, y = 0;

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

			const guis = {

				BoxGeometry: function ( mesh ) {

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

					}

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

				},

				CapsuleGeometry: function ( mesh ) {

					const data = {
						radius: 5,
						length: 5,
						capSegments: 10,
						radialSegments: 20
					};

					function generateGeometry() {

						updateGroupGeometry( mesh,
							new CapsuleGeometry( data.radius, data.length, data.capSegments, data.radialSegments ),
						);

					}

					const folder = gui.addFolder( 'THREE.CapsuleGeometry' );

					folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
					folder.add( data, 'length', 1, 30 ).onChange( generateGeometry );
					folder.add( data, 'capSegments', 1, 32 ).step( 1 ).onChange( generateGeometry );
					folder.add( data, 'radialSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );

					generateGeometry();

				},

				CylinderGeometry: function ( mesh ) {

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

					}

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

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

				},

				ConeGeometry: function ( mesh ) {

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

					}

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

				},

				CircleGeometry: function ( mesh ) {

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

					function generateGeometry() {

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

					}

					const 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 ) {

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

					function generateGeometry() {

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

					}

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

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

					generateGeometry();

				},

				IcosahedronGeometry: function ( mesh ) {

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

					function generateGeometry() {

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

					}

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

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

					generateGeometry();

				},

				LatheGeometry: function ( mesh ) {

					const points = [];

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

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

					}

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

					function generateGeometry() {

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

						updateGroupGeometry( mesh, geometry );

					}

					const 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 ) {

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

					function generateGeometry() {

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

					}

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

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

					generateGeometry();

				},

				PlaneGeometry: function ( mesh ) {

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

					function generateGeometry() {

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

					}

					const 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 ) {

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

					}

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

				},

				SphereGeometry: function ( mesh ) {

					const data = {
						radius: 15,
						widthSegments: 32,
						heightSegments: 16,
						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
							)
						);

					}

					const folder = gui.addFolder( 'THREE.SphereGeometry' );

					folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
					folder.add( data, 'widthSegments', 3, 64 ).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 ) {

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

					function generateGeometry() {

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

					}

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

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

					generateGeometry();

				},

				TorusGeometry: function ( mesh ) {

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

					}

					const 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 ) {

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

					}

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

				},

				TubeGeometry: function ( mesh ) {

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

					const path = new CustomSinCurve( 10 );

					function generateGeometry() {

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

					}

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

				},

				ShapeGeometry: function ( mesh ) {

					const data = {
						segments: 12
					};

					function generateGeometry() {

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

						updateGroupGeometry( mesh, geometry );

					}

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

					generateGeometry();

				},

				ExtrudeGeometry: function ( mesh ) {

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

					const length = 12, width = 8;

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

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

						updateGroupGeometry( mesh, geometry );

					}

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

				}

			};

			function chooseFromHash( mesh ) {

				const selectedGeometry = window.location.hash.substring( 1 ) || 'TorusGeometry';

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

					guis[ selectedGeometry ]( mesh );

				}

			}

			//

			const selectedGeometry = window.location.hash.substring( 1 );

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

				document.getElementById( 'newWindow' ).href += '#' + selectedGeometry;

			}

			const gui = new GUI();

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

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

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

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

			const 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 ] );

			const group = new Group();

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

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

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

			chooseFromHash( group );

			scene.add( group );

			function render() {

				requestAnimationFrame( render );

				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>