Skip to content

Commit 4b0b278

Browse files
Mugen87mrdoob
Mugen87
authored and
mrdoob
committed
New TubeBufferGeometry (mrdoob#9841)
* TubeBufferGeometry: Initial Commit * TubeBufferGeometry: Cleanup * webgl_geometry_extrude_splines: cleanup * TubeBufferGeometry: Changed FrenetFrames to private function * TubeBufferGeometry: Changed FrenetFrames function call
1 parent 3a73984 commit 4b0b278

File tree

8 files changed

+546
-421
lines changed

8 files changed

+546
-421
lines changed

‎docs/api/geometries/TubeBufferGeometry.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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">Creates a tube that extrudes along a 3d curve.</div>
16+
17+
<iframe id="scene" src="scenes/geometry-browser.html#TubeBufferGeometry"></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 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+
var ty = Math.sin( 2 * Math.PI * t );
50+
var 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.TubeBufferGeometry( 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>
64+
65+
<h2>Constructor</h2>
66+
67+
68+
<h3>[name]([page:Curve path], [page:Integer tubularSegments], [page:Float radius], [page:Integer radiusSegments], [page:Boolean closed])</h3>
69+
<div>
70+
path — [page:Curve] - A path that inherits from the [page:Curve] base class<br />
71+
tubularSegments — [page:Integer] - The number of segments that make up the tube, default is 64<br />
72+
radius — [page:Float] - The radius of the tube, default is 1<br />
73+
radiusSegments — [page:Integer] - The number of segments that make up the cross-section, default is 8 <br />
74+
closed — [page:Boolean] Is the tube open or closed, default is false <br />
75+
</div>
76+
77+
78+
<h2>Properties</h2>
79+
80+
<h3>[property:Object parameters]</h3>
81+
<div>
82+
An object with all of the parameters that were used to generate the geometry.
83+
</div>
84+
85+
<h3>[property:Array tangents]</h3>
86+
<div>
87+
An array of [page:Vector3] tangents
88+
</div>
89+
90+
<h3>[property:Array normals]</h3>
91+
<div>
92+
An array of [page:Vector3] normals
93+
</div>
94+
95+
<h3>[property:Array binormals]</h3>
96+
<div>
97+
An array of [page:Vector3] binormals
98+
</div>
99+
100+
101+
<h2>Methods</h2>
102+
103+
104+
<h3>THREE.TubeBufferGeometry.FrenetFrames([page:Curve path], [page:Integer segments], [page:Boolean closed])</h3>
105+
<div>
106+
path — A path that inherits from the [page:Curve] base class <br />
107+
segments — The number of segments that make up the tube <br />
108+
closed — Is the tube open or closed
109+
</div>
110+
<div>
111+
A static method that generates the Frenet Frames. This is internally run on any new TubeBufferGeometry and then the
112+
generated tangents, normals, and binormals are exposed as properties on the TubeBufferGeometry object.
113+
</div>
114+
115+
<h2>Source</h2>
116+
117+
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
118+
</body>
119+
</html>

‎docs/api/geometries/TubeGeometry.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ <h2>Example</h2>
4545

4646
function ( t ) { //getPoint: t is between 0-1
4747

48-
var tx = t * 3 - 1.5,
49-
ty = Math.sin( 2 * Math.PI * t ),
50-
tz = 0;
48+
var tx = t * 3 - 1.5;
49+
var ty = Math.sin( 2 * Math.PI * t );
50+
var tz = 0;
5151

5252
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
5353

@@ -65,10 +65,10 @@ <h2>Example</h2>
6565
<h2>Constructor</h2>
6666

6767

68-
<h3>[name]([page:Curve path], [page:Integer segments], [page:Float radius], [page:Integer radiusSegments], [page:Boolean closed])</h3>
68+
<h3>[name]([page:Curve path], [page:Integer tubularSegments], [page:Float radius], [page:Integer radiusSegments], [page:Boolean closed])</h3>
6969
<div>
7070
path — [page:Curve] - A path that inherits from the [page:Curve] base class<br />
71-
segments — [page:Integer] - The number of segments that make up the tube, default is 64<br />
71+
tubularSegments — [page:Integer] - The number of segments that make up the tube, default is 64<br />
7272
radius — [page:Float] - The radius of the tube, default is 1<br />
7373
radiusSegments — [page:Integer] - The number of segments that make up the cross-section, default is 8 <br />
7474
closed — [page:Boolean] Is the tube open or closed, default is false <br />

‎docs/list.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ var list = {
7171
[ "TorusGeometry", "api/geometries/TorusGeometry" ],
7272
[ "TorusKnotBufferGeometry", "api/geometries/TorusKnotBufferGeometry" ],
7373
[ "TorusKnotGeometry", "api/geometries/TorusKnotGeometry" ],
74-
[ "TubeGeometry", "api/geometries/TubeGeometry" ]
74+
[ "TubeGeometry", "api/geometries/TubeGeometry" ],
75+
[ "TubeBufferGeometry", "api/geometries/TubeBufferGeometry" ]
7576
],
7677

7778
"Lights": [

‎docs/scenes/js/geometry.js

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,26 @@ function updateGroupGeometry( mesh, geometry ) {
9191

9292
}
9393

94+
var CustomSinCurve = THREE.Curve.create(
95+
96+
function ( scale ) {
97+
98+
this.scale = ( scale === undefined ) ? 1 : scale;
99+
100+
},
101+
102+
function ( t ) {
103+
104+
var tx = t * 3 - 1.5;
105+
var ty = Math.sin( 2 * Math.PI * t );
106+
var tz = 0;
107+
108+
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
109+
110+
}
111+
112+
);
113+
94114
var guis = {
95115

96116
BoxBufferGeometry : function( mesh ) {
@@ -1136,37 +1156,45 @@ var guis = {
11361156
radiusSegments: 8
11371157
};
11381158

1139-
var CustomSinCurve = THREE.Curve.create(
1159+
var path = new CustomSinCurve( 10 );
11401160

1141-
function ( scale ) {
1161+
function generateGeometry() {
11421162

1143-
this.scale = ( scale === undefined ) ? 1 : scale;
1163+
updateGroupGeometry( mesh,
1164+
new THREE.TubeGeometry( path, data.segments, data.radius, data.radiusSegments, false )
1165+
);
11441166

1145-
},
1167+
}
11461168

1147-
function ( t ) {
1169+
var folder = gui.addFolder( 'THREE.TubeGeometry' );
11481170

1149-
var tx = t * 3 - 1.5;
1150-
var ty = Math.sin( 2 * Math.PI * t );
1151-
var tz = 0;
1171+
folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
1172+
folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
1173+
folder.add( data, 'radiusSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
11521174

1153-
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
1175+
generateGeometry();
11541176

1155-
}
1177+
},
11561178

1157-
);
1179+
TubeBufferGeometry : function( mesh ) {
1180+
1181+
var data = {
1182+
segments : 20,
1183+
radius : 2,
1184+
radiusSegments: 8
1185+
};
11581186

11591187
var path = new CustomSinCurve( 10 );
11601188

11611189
function generateGeometry() {
11621190

11631191
updateGroupGeometry( mesh,
1164-
new THREE.TubeGeometry( path, data.segments, data.radius, data.radiusSegments, false )
1192+
new THREE.TubeBufferGeometry( path, data.segments, data.radius, data.radiusSegments, false )
11651193
);
11661194

11671195
}
11681196

1169-
var folder = gui.addFolder( 'THREE.TubeGeometry' );
1197+
var folder = gui.addFolder( 'THREE.TubeBufferGeometry' );
11701198

11711199
folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
11721200
folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );

0 commit comments

Comments
 (0)