Documentation: Add more live examples (#9776)

* Documentation: Add more live examples

* Documentation: Correct format

docs/api/geometries/ExtrudeGeometry.html

@@ -12,7 +12,53 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">Creates extruded geometry from a path shape</div>
+		<div class="desc">Creates extruded geometry from a path shape.</div>
+
+		<iframe id="scene" src="scenes/geometry-browser.html#ExtrudeGeometry"></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 length = 12, width = 8;
+
+		var shape = new THREE.Shape();
+		shape.moveTo( 0,0 );
+		shape.lineTo( 0, width );
+		shape.lineTo( length, width );
+		shape.lineTo( length, 0 );
+		shape.lineTo( 0, 0 );
+
+		var extrudeSettings = {
+			steps: 2,
+			amount: 16,
+			bevelEnabled: true,
+			bevelThickness: 1,
+			bevelSize: 1,
+			bevelSegments: 1
+		};
+
+		var geometry = new THREE.ExtrudeGeometry( shape, data );
+		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		var mesh = new THREE.Mesh( geometry, material ) ;
+		scene.add( mesh );
+		</code>
 
 
 		<h2>Constructor</h2>
@@ -23,20 +69,20 @@
 		shapes — Shape or an array of shapes. <br />
 		options — Object that can contain the following parameters.
 
-	<ul>
-<li>curveSegments —  int. number of points on the curves</li>
-<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
-<li>amount —  int. Depth to extrude the shape</li>
-<li>bevelEnabled —  bool. turn on bevel</li>
-<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
-<li>bevelSize —  float. how far from shape outline is bevel</li>
-<li>bevelSegments —  int. number of bevel layers</li>
-<li>extrudePath —  THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
-<li>frames —  THREE.TubeGeometry.FrenetFrames.  containing arrays of tangents, normals, binormals</li>
-<li>material —  int. material index for front and back faces</li>
-<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
-<li>UVGenerator —  Object. object that provides UV generator functions</li>
-	</ul>
+			<ul>
+				<li>curveSegments —  int. number of points on the curves</li>
+				<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
+				<li>amount —  int. Depth to extrude the shape</li>
+				<li>bevelEnabled —  bool. turn on bevel</li>
+				<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
+				<li>bevelSize —  float. how far from shape outline is bevel</li>
+				<li>bevelSegments —  int. number of bevel layers</li>
+				<li>extrudePath —  THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if frames aren't defined)</li>
+				<li>frames —  THREE.TubeGeometry.FrenetFrames.  containing arrays of tangents, normals, binormals</li>
+				<li>material —  int. material index for front and back faces</li>
+				<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
+				<li>UVGenerator —  Object. object that provides UV generator functions</li>
+			</ul>
 
 		</div>
 		<div>
@@ -53,42 +99,42 @@
 		<div>
 			shapes — An Array of shapes to add. <br />
 			options — Object that can contain the following parameters.
-	<ul>
-<li>curveSegments —  int. number of points on the curves</li>
-<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
-<li>amount —  int. Depth to extrude the shape</li>
-<li>bevelEnabled —  bool. turn on bevel</li>
-<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
-<li>bevelSize —  float. how far from shape outline is bevel</li>
-<li>bevelSegments —  int. number of bevel layers</li>
-<li>extrudePath —  THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
-<li>frames —  THREE.TubeGeometry.FrenetFrames.  containing arrays of tangents, normals, binormals</li>
-<li>material —  int. material index for front and back faces</li>
-<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
-<li>UVGenerator —  Object. object that provides UV generator functions</li>
-	</ul>
-	</div>
+			<ul>
+				<li>curveSegments —  int. number of points on the curves</li>
+				<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
+				<li>amount —  int. Depth to extrude the shape</li>
+				<li>bevelEnabled —  bool. turn on bevel</li>
+				<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
+				<li>bevelSize —  float. how far from shape outline is bevel</li>
+				<li>bevelSegments —  int. number of bevel layers</li>
+				<li>extrudePath —  THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
+				<li>frames —  THREE.TubeGeometry.FrenetFrames.  containing arrays of tangents, normals, binormals</li>
+				<li>material —  int. material index for front and back faces</li>
+				<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
+				<li>UVGenerator —  Object. object that provides UV generator functions</li>
+			</ul>
+		</div>
 		<div>Adds the shapes to the list to extrude.</div>
 
 		<h3>[method:null addShape]([page:Shape shape], [page:Object options])</h3>
 		<div>
 			shape — A shape to add. <br />
 			options — Object that can contain the following parameters.
-	<ul>
-<li>curveSegments —  int. number of points on the curves</li>
-<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
-<li>amount —  int. Depth to extrude the shape</li>
-<li>bevelEnabled —  bool. turn on bevel</li>
-<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
-<li>bevelSize —  float. how far from shape outline is bevel</li>
-<li>bevelSegments —  int. number of bevel layers</li>
-<li>extrudePath —  THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
-<li>frames —  THREE.TubeGeometry.FrenetFrames.  containing arrays of tangents, normals, binormals</li>
-<li>material —  int. material index for front and back faces</li>
-<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
-<li>UVGenerator —  Object. object that provides UV generator functions</li>
-	</ul>
-	</div>
+			<ul>
+				<li>curveSegments —  int. number of points on the curves</li>
+				<li>steps —  int. number of points used for subdividing segements of extrude spline</li>
+				<li>amount —  int. Depth to extrude the shape</li>
+				<li>bevelEnabled —  bool. turn on bevel</li>
+				<li>bevelThickness —  float. how deep into the original shape bevel goes</li>
+				<li>bevelSize —  float. how far from shape outline is bevel</li>
+				<li>bevelSegments —  int. number of bevel layers</li>
+				<li>extrudePath —  THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
+				<li>frames —  THREE.TubeGeometry.FrenetFrames.  containing arrays of tangents, normals, binormals</li>
+				<li>material —  int. material index for front and back faces</li>
+				<li>extrudeMaterial —  int. material index for extrusion and beveled faces</li>
+				<li>UVGenerator —  Object. object that provides UV generator functions</li>
+			</ul>
+		</div>
 		<div>Add the shape to the list to extrude.</div>
 
 

docs/api/geometries/ShapeGeometry.html

@@ -12,25 +12,44 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">Creates a one-sided polygonal geometry from one or more path shapes. Similar to [page:ExtrudeGeometry]</div>
+		<div class="desc">Creates a one-sided polygonal geometry from one or more path shapes. Similar to [page:ExtrudeGeometry].</div>
 
-		<h2>Example</h2>
+		<iframe id="scene" src="scenes/geometry-browser.html#ShapeGeometry"></iframe>
 
+		<script>
 
-		<code>
-var rectLength = 120, rectWidth = 40;
+		// 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' );
 
-var rectShape = new THREE.Shape();
-rectShape.moveTo( 0,0 );
-rectShape.lineTo( 0, rectWidth );
-rectShape.lineTo( rectLength, rectWidth );
-rectShape.lineTo( rectLength, 0 );
-rectShape.lineTo( 0, 0 );
+		}
 
-var rectGeom = new THREE.ShapeGeometry( rectShape );
-var rectMesh = new THREE.Mesh( rectGeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;
+		</script>
 
-scene.add( rectMesh );
+
+		<h2>Example</h2>
+
+
+		<code>
+		var length = 16, width = 12;
+
+		var shape = new THREE.Shape();
+		shape.moveTo( 0,0 );
+		shape.lineTo( 0, width );
+		shape.lineTo( length, width );
+		shape.lineTo( length, 0 );
+		shape.lineTo( 0, 0 );
+
+		var geometry = new THREE.ShapeGeometry( shape );
+		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		var mesh = new THREE.Mesh( geometry, material ) ;
+		scene.add( mesh );
 		</code>
 
 		<h2>Constructor</h2>

docs/api/geometries/TubeGeometry.html

@@ -12,35 +12,55 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">Creates a tube that extrudes along a 3d curve</div>
+		<div class="desc">Creates a tube that extrudes along a 3d curve.</div>
+
+		<iframe id="scene" src="scenes/geometry-browser.html#TubeGeometry"></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 CustomSinCurve = THREE.Curve.create(
-    function ( scale ) { //custom curve constructor
-        this.scale = (scale === undefined) ? 1 : scale;
-    },
-
-    function ( t ) { //getPoint: t is between 0-1
-        var tx = t * 3 - 1.5,
-            ty = Math.sin( 2 * Math.PI * t ),
-            tz = 0;
-
-        return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
-    }
-);
-
-var path = new CustomSinCurve( 10 );
-
-var geometry = new THREE.TubeGeometry(
-    path,  //path
-    20,    //segments
-    2,     //radius
-    8,     //radiusSegments
-    false  //closed
-);
-</code>
+		<code>
+		var CustomSinCurve = THREE.Curve.create(
+
+			function ( scale ) { //custom curve constructor
+
+				this.scale = ( scale === undefined ) ? 1 : scale;
+
+			},
+
+			function ( t ) { //getPoint: t is between 0-1
+
+				var tx = t * 3 - 1.5,
+				ty = Math.sin( 2 * Math.PI * t ),
+				tz = 0;
+
+				return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+
+			}
+
+		);
+
+		var path = new CustomSinCurve( 10 );
+		var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
+		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		var mesh = new THREE.Mesh( geometry, material );
+		scene.add( mesh );
+		</code>
 
 		<h2>Constructor</h2>
 

docs/scenes/js/geometry.js

@@ -1126,6 +1126,119 @@ var guis = {
 
 		generateGeometry();
 
+	},
+
+	TubeGeometry : function( mesh ) {
+
+		var data = {
+			segments : 20,
+			radius : 2,
+			radiusSegments: 8
+		};
+
+		var CustomSinCurve = THREE.Curve.create(
+
+			function ( scale ) {
+
+				this.scale = ( scale === undefined ) ? 1 : scale;
+
+			},
+
+			function ( t ) {
+
+				var tx = t * 3 - 1.5;
+				var ty = Math.sin( 2 * Math.PI * t );
+				var tz = 0;
+
+				return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
+
+			}
+
+		);
+
+		var path = new CustomSinCurve( 10 );
+
+		function generateGeometry() {
+
+			updateGroupGeometry( mesh,
+				new THREE.TubeGeometry( path, data.segments, data.radius, data.radiusSegments, 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, 'radiusSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
+
+		generateGeometry();
+
+	},
+
+	ShapeGeometry: function( mesh ) {
+
+		var length = 16, width = 12;
+
+		var shape = new THREE.Shape();
+		shape.moveTo( 0,0 );
+		shape.lineTo( 0, width );
+		shape.lineTo( length, width );
+		shape.lineTo( length, 0 );
+		shape.lineTo( 0, 0 );
+
+		function generateGeometry() {
+
+			updateGroupGeometry( mesh,
+				new THREE.ShapeGeometry( shape )
+			);
+
+		}
+
+		var folder = gui.addFolder( 'THREE.ShapeGeometry' );
+
+		generateGeometry();
+
+	},
+
+	ExtrudeGeometry: function( mesh ) {
+
+		var data = {
+			steps: 2,
+			amount: 16,
+			bevelEnabled: true,
+			bevelThickness: 1,
+			bevelSize: 1,
+			bevelSegments: 1
+		};
+
+		var length = 12, width = 8;
+
+		var shape = new THREE.Shape();
+		shape.moveTo( 0,0 );
+		shape.lineTo( 0, width );
+		shape.lineTo( length, width );
+		shape.lineTo( length, 0 );
+		shape.lineTo( 0, 0 );
+
+		function generateGeometry() {
+
+			updateGroupGeometry( mesh,
+				new THREE.ExtrudeGeometry( shape, data )
+			);
+
+		}
+
+		var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );
+
+		folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
+		folder.add( data, 'amount', 1, 20 ).step( 1 ).onChange( generateGeometry );
+		folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
+		folder.add( data, 'bevelSize', 1, 5 ).step( 1 ).onChange( generateGeometry );
+		folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
+
+		generateGeometry();
+
 	}
 
 };