Skip to content

Commit 9d88fef

Browse files
Mugen87mrdoob
Mugen87
authored and
mrdoob
committed
Documentation: Enhanced ParametricGeometry docs (mrdoob#9768)
1 parent 1d682dc commit 9d88fef

5 files changed

Lines changed: 137 additions & 0 deletions

File tree

‎docs/api/geometries/ParametricBufferGeometry.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<base href="../../" />
6+
<script src="list.js"></script>
7+
<script src="page.js"></script>
8+
<link type="text/css" rel="stylesheet" href="page.css" />
9+
</head>
10+
<body>
11+
[page:BufferGeometry] &rarr;
12+
13+
<h1>[name]</h1>
14+
15+
<div class="desc">Generate geometry representing a parametric surface.</div>
16+
17+
<iframe id="scene" src="scenes/geometry-browser.html#ParametricBufferGeometry"></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+
<code>
38+
var geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 25, 25 );
39+
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
40+
var cube = new THREE.Mesh( geometry, material );
41+
scene.add( cube );
42+
</code>
43+
44+
45+
<h2>Constructor</h2>
46+
47+
48+
<h3>[name]([page:Function func], [page:Integer slices], [page:Integer stacks])</h3>
49+
<div>
50+
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 />
51+
slices — The count of slices to use for the parametric function <br />
52+
stacks — The count of stacks to use for the parametric function
53+
</div>
54+
55+
56+
<h2>Source</h2>
57+
58+
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
59+
</body>
60+
</html>

‎docs/api/geometries/ParametricGeometry.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,33 @@ <h1>[name]</h1>
1414

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

17+
<iframe id="scene" src="scenes/geometry-browser.html#ParametricGeometry"></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+
<code>
38+
var geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
39+
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
40+
var cube = new THREE.Mesh( geometry, material );
41+
scene.add( cube );
42+
</code>
43+
1744

1845
<h2>Constructor</h2>
1946

‎docs/list.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ var list = {
5353
[ "LatheGeometry", "api/geometries/LatheGeometry" ],
5454
[ "OctahedronBufferGeometry", "api/geometries/OctahedronBufferGeometry" ],
5555
[ "OctahedronGeometry", "api/geometries/OctahedronGeometry" ],
56+
[ "ParametricBufferGeometry", "api/geometries/ParametricBufferGeometry" ],
5657
[ "ParametricGeometry", "api/geometries/ParametricGeometry" ],
5758
[ "PlaneBufferGeometry", "api/geometries/PlaneBufferGeometry" ],
5859
[ "PlaneGeometry", "api/geometries/PlaneGeometry" ],

‎docs/scenes/geometry-browser.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<script src="../../build/three.min.js"></script>
3838
<script src='../../examples/js/libs/dat.gui.min.js'></script>
3939
<script src="../../examples/js/controls/OrbitControls.js"></script>
40+
<script src="../../examples/js/ParametricGeometries.js"></script>
4041

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

‎docs/scenes/js/geometry.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1078,6 +1078,54 @@ var guis = {
10781078

10791079
generateGeometry();
10801080

1081+
},
1082+
1083+
ParametricBufferGeometry : function( mesh ) {
1084+
1085+
var data = {
1086+
slices : 25,
1087+
stacks : 25
1088+
};
1089+
1090+
function generateGeometry() {
1091+
1092+
updateGroupGeometry( mesh,
1093+
new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
1094+
);
1095+
1096+
}
1097+
1098+
var folder = gui.addFolder( 'THREE.ParametricBufferGeometry' );
1099+
1100+
folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
1101+
folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
1102+
1103+
generateGeometry();
1104+
1105+
},
1106+
1107+
ParametricGeometry : function( mesh ) {
1108+
1109+
var data = {
1110+
slices : 25,
1111+
stacks : 25
1112+
};
1113+
1114+
function generateGeometry() {
1115+
1116+
updateGroupGeometry( mesh,
1117+
new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
1118+
);
1119+
1120+
}
1121+
1122+
var folder = gui.addFolder( 'THREE.ParametricGeometry' );
1123+
1124+
folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
1125+
folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
1126+
1127+
generateGeometry();
1128+
10811129
}
10821130

10831131
};

0 commit comments

Comments
 (0)