Documentation: Enhanced ParametricGeometry docs (#9768)

9d88fefa · Michael Herzog · Mr.doob · 1d682dc9 · 9d88fefa · 9d88fefa
5 changed file
--- a/docs/api/geometries/ParametricBufferGeometry.html
+++ b/docs/api/geometries/ParametricBufferGeometry.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:BufferGeometry] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">Generate geometry representing a parametric surface.</div>
+
+		<iframe id="scene" src="scenes/geometry-browser.html#ParametricBufferGeometry"></iframe>
+
+		<script>
+
+		// iOS iframe auto-resize workaround
+
+		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
+
+			var scene = document.getElementById( 'scene' );
+
+			scene.style.width = getComputedStyle( scene ).width;
+			scene.style.height = getComputedStyle( scene ).height;
+			scene.setAttribute( 'scrolling', 'no' );
+
+		}
+
+		</script>
+
+		<h2>Example</h2>
+
+		<code>
+		var geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 25, 25 );
+		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		var cube = new THREE.Mesh( geometry, material );
+		scene.add( cube );
+		</code>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]([page:Function func], [page:Integer slices], [page:Integer stacks])</h3>
+		<div>
+		func — A function that takes in a [page:Float u] and [page:Float v] value each between 0 and 1 and returns a [page:Vector3]<br />
+		slices — The count of slices to use for the parametric function <br />
+		stacks — The count of stacks to use for the parametric function
+		</div>
+
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
--- a/docs/api/geometries/ParametricGeometry.html
+++ b/docs/api/geometries/ParametricGeometry.html
@@ -14,6 +14,33 @@

 		<div class="desc">Generate geometry representing a parametric surface.</div>

+		<iframe id="scene" src="scenes/geometry-browser.html#ParametricGeometry"></iframe>
+
+		<script>
+
+		// iOS iframe auto-resize workaround
+
+		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
+
+			var scene = document.getElementById( 'scene' );
+
+			scene.style.width = getComputedStyle( scene ).width;
+			scene.style.height = getComputedStyle( scene ).height;
+			scene.setAttribute( 'scrolling', 'no' );
+
+		}
+
+		</script>
+
+		<h2>Example</h2>
+
+		<code>
+		var geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
+		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		var cube = new THREE.Mesh( geometry, material );
+		scene.add( cube );
+		</code>
+

 		<h2>Constructor</h2>


--- a/docs/list.js
+++ b/docs/list.js
@@ -53,6 +53,7 @@ var list = {
 			[ "LatheGeometry", "api/geometries/LatheGeometry" ],
 			[ "OctahedronBufferGeometry", "api/geometries/OctahedronBufferGeometry" ],
 			[ "OctahedronGeometry", "api/geometries/OctahedronGeometry" ],
+			[ "ParametricBufferGeometry", "api/geometries/ParametricBufferGeometry" ],
 			[ "ParametricGeometry", "api/geometries/ParametricGeometry" ],
 			[ "PlaneBufferGeometry", "api/geometries/PlaneBufferGeometry" ],
 			[ "PlaneGeometry", "api/geometries/PlaneGeometry" ],

--- a/docs/scenes/geometry-browser.html
+++ b/docs/scenes/geometry-browser.html
@@ -37,6 +37,7 @@
 		<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/js/ParametricGeometries.js"></script>

 		<script src='js/geometry.js'></script>


--- a/docs/scenes/js/geometry.js
+++ b/docs/scenes/js/geometry.js
@@ -1078,6 +1078,54 @@ var guis = {

 		generateGeometry();

+	},
+
+	ParametricBufferGeometry : function( mesh ) {
+
+		var data = {
+			slices : 25,
+			stacks : 25
+		};
+
+		function generateGeometry() {
+
+			updateGroupGeometry( mesh,
+				new THREE.ParametricBufferGeometry( THREE.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 THREE.ParametricGeometry( THREE.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();
+
 	}

 };