Skip to content

Commit dddfcc6

Browse files
Mugen87mrdoob
Mugen87
authored and
mrdoob
committed
Documentation: Add more live examples (mrdoob#9776)
* Documentation: Add more live examples * Documentation: Correct format
1 parent 2f8155f commit dddfcc6

File tree

4 files changed

+282
-84
lines changed

4 files changed

+282
-84
lines changed

‎docs/api/geometries/ExtrudeGeometry.html

Lines changed: 91 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,53 @@
1212

1313
<h1>[name]</h1>
1414

15-
<div class="desc">Creates extruded geometry from a path shape</div>
15+
<div class="desc">Creates extruded geometry from a path shape.</div>
16+
17+
<iframe id="scene" src="scenes/geometry-browser.html#ExtrudeGeometry"></iframe>
18+
19+
<script>
20+
21+
// iOS iframe auto-resize workaround
22+
23+
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
24+
25+
var scene = document.getElementById( 'scene' );
26+
27+
scene.style.width = getComputedStyle( scene ).width;
28+
scene.style.height = getComputedStyle( scene ).height;
29+
scene.setAttribute( 'scrolling', 'no' );
30+
31+
}
32+
33+
</script>
34+
35+
<h2>Example</h2>
36+
37+
38+
<code>
39+
var length = 12, width = 8;
40+
41+
var shape = new THREE.Shape();
42+
shape.moveTo( 0,0 );
43+
shape.lineTo( 0, width );
44+
shape.lineTo( length, width );
45+
shape.lineTo( length, 0 );
46+
shape.lineTo( 0, 0 );
47+
48+
var extrudeSettings = {
49+
steps: 2,
50+
amount: 16,
51+
bevelEnabled: true,
52+
bevelThickness: 1,
53+
bevelSize: 1,
54+
bevelSegments: 1
55+
};
56+
57+
var geometry = new THREE.ExtrudeGeometry( shape, data );
58+
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
59+
var mesh = new THREE.Mesh( geometry, material ) ;
60+
scene.add( mesh );
61+
</code>
1662

1763

1864
<h2>Constructor</h2>
@@ -23,20 +69,20 @@ <h3>[name]([page:Array shapes], [page:Object options])</h3>
2369
shapes — Shape or an array of shapes. <br />
2470
options — Object that can contain the following parameters.
2571

26-
<ul>
27-
<li>curveSegments — int. number of points on the curves</li>
28-
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
29-
<li>amount — int. Depth to extrude the shape</li>
30-
<li>bevelEnabled — bool. turn on bevel</li>
31-
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
32-
<li>bevelSize — float. how far from shape outline is bevel</li>
33-
<li>bevelSegments — int. number of bevel layers</li>
34-
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
35-
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
36-
<li>material — int. material index for front and back faces</li>
37-
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
38-
<li>UVGenerator — Object. object that provides UV generator functions</li>
39-
</ul>
72+
<ul>
73+
<li>curveSegments — int. number of points on the curves</li>
74+
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
75+
<li>amount — int. Depth to extrude the shape</li>
76+
<li>bevelEnabled — bool. turn on bevel</li>
77+
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
78+
<li>bevelSize — float. how far from shape outline is bevel</li>
79+
<li>bevelSegments — int. number of bevel layers</li>
80+
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if frames aren't defined)</li>
81+
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
82+
<li>material — int. material index for front and back faces</li>
83+
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
84+
<li>UVGenerator — Object. object that provides UV generator functions</li>
85+
</ul>
4086

4187
</div>
4288
<div>
@@ -53,42 +99,42 @@ <h3>[method:null addShapeList]([page:Array shapes], [page:Object options])</h3>
5399
<div>
54100
shapes — An Array of shapes to add. <br />
55101
options — Object that can contain the following parameters.
56-
<ul>
57-
<li>curveSegments — int. number of points on the curves</li>
58-
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
59-
<li>amount — int. Depth to extrude the shape</li>
60-
<li>bevelEnabled — bool. turn on bevel</li>
61-
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
62-
<li>bevelSize — float. how far from shape outline is bevel</li>
63-
<li>bevelSegments — int. number of bevel layers</li>
64-
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
65-
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
66-
<li>material — int. material index for front and back faces</li>
67-
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
68-
<li>UVGenerator — Object. object that provides UV generator functions</li>
69-
</ul>
70-
</div>
102+
<ul>
103+
<li>curveSegments — int. number of points on the curves</li>
104+
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
105+
<li>amount — int. Depth to extrude the shape</li>
106+
<li>bevelEnabled — bool. turn on bevel</li>
107+
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
108+
<li>bevelSize — float. how far from shape outline is bevel</li>
109+
<li>bevelSegments — int. number of bevel layers</li>
110+
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
111+
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
112+
<li>material — int. material index for front and back faces</li>
113+
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
114+
<li>UVGenerator — Object. object that provides UV generator functions</li>
115+
</ul>
116+
</div>
71117
<div>Adds the shapes to the list to extrude.</div>
72118

73119
<h3>[method:null addShape]([page:Shape shape], [page:Object options])</h3>
74120
<div>
75121
shape — A shape to add. <br />
76122
options — Object that can contain the following parameters.
77-
<ul>
78-
<li>curveSegments — int. number of points on the curves</li>
79-
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
80-
<li>amount — int. Depth to extrude the shape</li>
81-
<li>bevelEnabled — bool. turn on bevel</li>
82-
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
83-
<li>bevelSize — float. how far from shape outline is bevel</li>
84-
<li>bevelSegments — int. number of bevel layers</li>
85-
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
86-
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
87-
<li>material — int. material index for front and back faces</li>
88-
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
89-
<li>UVGenerator — Object. object that provides UV generator functions</li>
90-
</ul>
91-
</div>
123+
<ul>
124+
<li>curveSegments — int. number of points on the curves</li>
125+
<li>steps — int. number of points used for subdividing segements of extrude spline</li>
126+
<li>amount — int. Depth to extrude the shape</li>
127+
<li>bevelEnabled — bool. turn on bevel</li>
128+
<li>bevelThickness — float. how deep into the original shape bevel goes</li>
129+
<li>bevelSize — float. how far from shape outline is bevel</li>
130+
<li>bevelSegments — int. number of bevel layers</li>
131+
<li>extrudePath — THREE.CurvePath. 3d spline path to extrude shape along. (creates Frames if (frames aren't defined)</li>
132+
<li>frames — THREE.TubeGeometry.FrenetFrames. containing arrays of tangents, normals, binormals</li>
133+
<li>material — int. material index for front and back faces</li>
134+
<li>extrudeMaterial — int. material index for extrusion and beveled faces</li>
135+
<li>UVGenerator — Object. object that provides UV generator functions</li>
136+
</ul>
137+
</div>
92138
<div>Add the shape to the list to extrude.</div>
93139

94140

‎docs/api/geometries/ShapeGeometry.html

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,44 @@
1212

1313
<h1>[name]</h1>
1414

15-
<div class="desc">Creates a one-sided polygonal geometry from one or more path shapes. Similar to [page:ExtrudeGeometry]</div>
15+
<div class="desc">Creates a one-sided polygonal geometry from one or more path shapes. Similar to [page:ExtrudeGeometry].</div>
1616

17-
<h2>Example</h2>
17+
<iframe id="scene" src="scenes/geometry-browser.html#ShapeGeometry"></iframe>
1818

19+
<script>
1920

20-
<code>
21-
var rectLength = 120, rectWidth = 40;
21+
// iOS iframe auto-resize workaround
22+
23+
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
24+
25+
var scene = document.getElementById( 'scene' );
26+
27+
scene.style.width = getComputedStyle( scene ).width;
28+
scene.style.height = getComputedStyle( scene ).height;
29+
scene.setAttribute( 'scrolling', 'no' );
2230

23-
var rectShape = new THREE.Shape();
24-
rectShape.moveTo( 0,0 );
25-
rectShape.lineTo( 0, rectWidth );
26-
rectShape.lineTo( rectLength, rectWidth );
27-
rectShape.lineTo( rectLength, 0 );
28-
rectShape.lineTo( 0, 0 );
31+
}
2932

30-
var rectGeom = new THREE.ShapeGeometry( rectShape );
31-
var rectMesh = new THREE.Mesh( rectGeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;
33+
</script>
3234

33-
scene.add( rectMesh );
35+
36+
<h2>Example</h2>
37+
38+
39+
<code>
40+
var length = 16, width = 12;
41+
42+
var shape = new THREE.Shape();
43+
shape.moveTo( 0,0 );
44+
shape.lineTo( 0, width );
45+
shape.lineTo( length, width );
46+
shape.lineTo( length, 0 );
47+
shape.lineTo( 0, 0 );
48+
49+
var geometry = new THREE.ShapeGeometry( shape );
50+
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
51+
var mesh = new THREE.Mesh( geometry, material ) ;
52+
scene.add( mesh );
3453
</code>
3554

3655
<h2>Constructor</h2>

‎docs/api/geometries/TubeGeometry.html

Lines changed: 46 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,55 @@
1212

1313
<h1>[name]</h1>
1414

15-
<div class="desc">Creates a tube that extrudes along a 3d curve</div>
15+
<div class="desc">Creates a tube that extrudes along a 3d curve.</div>
16+
17+
<iframe id="scene" src="scenes/geometry-browser.html#TubeGeometry"></iframe>
18+
19+
<script>
20+
21+
// iOS iframe auto-resize workaround
22+
23+
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
24+
25+
var scene = document.getElementById( 'scene' );
26+
27+
scene.style.width = getComputedStyle( scene ).width;
28+
scene.style.height = getComputedStyle( scene ).height;
29+
scene.setAttribute( 'scrolling', 'no' );
30+
31+
}
32+
33+
</script>
1634

1735
<h2>Example</h2>
1836

19-
<code>
20-
var CustomSinCurve = THREE.Curve.create(
21-
function ( scale ) { //custom curve constructor
22-
this.scale = (scale === undefined) ? 1 : scale;
23-
},
24-
25-
function ( t ) { //getPoint: t is between 0-1
26-
var tx = t * 3 - 1.5,
27-
ty = Math.sin( 2 * Math.PI * t ),
28-
tz = 0;
29-
30-
return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
31-
}
32-
);
33-
34-
var path = new CustomSinCurve( 10 );
35-
36-
var geometry = new THREE.TubeGeometry(
37-
path, //path
38-
20, //segments
39-
2, //radius
40-
8, //radiusSegments
41-
false //closed
42-
);
43-
</code>
37+
<code>
38+
var CustomSinCurve = THREE.Curve.create(
39+
40+
function ( scale ) { //custom curve constructor
41+
42+
this.scale = ( scale === undefined ) ? 1 : scale;
43+
44+
},
45+
46+
function ( t ) { //getPoint: t is between 0-1
47+
48+
var tx = t * 3 - 1.5,
49+
ty = Math.sin( 2 * Math.PI * t ),
50+
tz = 0;
51+
52+
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
53+
54+
}
55+
56+
);
57+
58+
var path = new CustomSinCurve( 10 );
59+
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
60+
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
61+
var mesh = new THREE.Mesh( geometry, material );
62+
scene.add( mesh );
63+
</code>
4464

4565
<h2>Constructor</h2>
4666

0 commit comments

Comments
 (0)