Skip to content

Commit

Permalink
TorusKnotBufferGeometry: Parameter changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 committed Mar 7, 2016
1 parent 4c69baa commit 8430065
Show file tree
Hide file tree
Showing 11 changed files with 83 additions and 114 deletions.
8 changes: 3 additions & 5 deletions docs/api/extras/geometries/TorusKnotBufferGeometry.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,15 @@ <h2>Example</h2>
<h2>Constructor</h2>


<h3>[name]([page:Float radius], [page:Float tube], [page:Integer radialSegments], [page:Integer tubularSegments], [page:Integer p], [page:Integer q], [page:Float heightScale], [page:Float arc])</h3>
<h3>[name]([page:Float radius], [page:Float tube], [page:Integer tubularSegments], [page:Integer radialSegments], [page:Integer p], [page:Integer q])</h3>
<div>
<ul>
<li>radius — Default is 100.</li>
<li>tube — Diameter of the tube. Default is 40.</li>
<li>radialSegments — Default is 64.</li>
<li>tubularSegments — Default is 8.</li>
<li>tubularSegments — Default is 64.</li>
<li>radialSegments — Default is 8.</li>
<li>p — This value determines, how many times the geometry winds around its axis of rotational symmetry. Default is 2.</li>
<li>q — This value determines, how many times the geometry winds around a circle in the interior of the torus. Default is 3.</li>
<li>heightScale — Default is 1.</li>
<li>arc — Central angle. Default is Math.PI * 2.</li>
</ul>
</div>

Expand Down
8 changes: 3 additions & 5 deletions docs/api/extras/geometries/TorusKnotGeometry.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,15 @@ <h2>Example</h2>
<h2>Constructor</h2>


<h3>[name]([page:Float radius], [page:Float tube], [page:Integer radialSegments], [page:Integer tubularSegments], [page:Integer p], [page:Integer q], [page:Float heightScale], [page:Float arc])</h3>
<h3>[name]([page:Float radius], [page:Float tube], [page:Integer tubularSegments], [page:Integer radialSegments], [page:Integer p], [page:Integer q])</h3>
<div>
<ul>
<li>radius — Default is 100.</li>
<li>tube — Diameter of the tube. Default is 40.</li>
<li>radialSegments — Default is 64.</li>
<li>tubularSegments — Default is 8.</li>
<li>tubularSegments — Default is 64.</li>
<li>radialSegments — Default is 8.</li>
<li>p — This value determines, how many times the geometry winds around its axis of rotational symmetry. Default is 2.</li>
<li>q — This value determines, how many times the geometry winds around a circle in the interior of the torus. Default is 3.</li>
<li>heightScale — Default is 1.</li>
<li>arc — Central angle. Default is Math.PI * 2.</li>
</ul>
</div>

Expand Down
36 changes: 14 additions & 22 deletions docs/scenes/js/geometry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -752,20 +752,18 @@ var guis = {
var data = {
radius : 10,
tube : 3,
radialSegments : 64,
tubularSegments : 8,
tubularSegments : 64,
radialSegments : 8,
p : 2,
q : 3,
heightScale : 1,
arc : twoPi
q : 3
};

function generateGeometry() {

updateGroupGeometry( mesh,
new THREE.TorusKnotBufferGeometry(
data.radius, data.tube, data.radialSegments, data.tubularSegments,
data.p, data.q, data.heightScale, data.arc
data.radius, data.tube, data.tubularSegments, data.radialSegments,
data.p, data.q
)
);

Expand All @@ -775,12 +773,10 @@ var guis = {

folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
folder.add( data, 'radialSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'tubularSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );

generateGeometry();

Expand All @@ -791,20 +787,18 @@ var guis = {
var data = {
radius : 10,
tube : 3,
radialSegments : 64,
tubularSegments : 8,
tubularSegments : 64,
radialSegments : 8,
p : 2,
q : 3,
heightScale : 1,
arc : twoPi
q : 3
};

function generateGeometry() {

updateGroupGeometry( mesh,
new THREE.TorusKnotGeometry(
data.radius, data.tube, data.radialSegments, data.tubularSegments,
data.p, data.q, data.heightScale, data.arc
data.radius, data.tube, data.tubularSegments, data.radialSegments,
data.p, data.q
)
);

Expand All @@ -814,12 +808,10 @@ var guis = {

folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
folder.add( data, 'radialSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'tubularSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry );
folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );

generateGeometry();

Expand Down
7 changes: 3 additions & 4 deletions editor/js/Menubar.Add.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,13 +198,12 @@ Menubar.Add = function ( editor ) {

var radius = 2;
var tube = 0.8;
var radialSegments = 64;
var tubularSegments = 12;
var tubularSegments = 64;
var radialSegments = 12;
var p = 2;
var q = 3;
var heightScale = 1;

var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
var geometry = new THREE.TorusKnotGeometry( radius, tube, tubularSegments, radialSegments, p, q );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'TorusKnot ' + ( ++ meshCount );

Expand Down
35 changes: 12 additions & 23 deletions editor/js/Sidebar.Geometry.TorusKnotGeometry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,6 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {

container.add( tubeRow );

// radialSegments

var radialSegmentsRow = new UI.Row();
var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );

radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
radialSegmentsRow.add( radialSegments );

container.add( radialSegmentsRow );

// tubularSegments

var tubularSegmentsRow = new UI.Row();
Expand All @@ -50,6 +40,16 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {

container.add( tubularSegmentsRow );

// radialSegments

var radialSegmentsRow = new UI.Row();
var radialSegments = new UI.Integer( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );

radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ) );
radialSegmentsRow.add( radialSegments );

container.add( radialSegmentsRow );

// p

var pRow = new UI.Row();
Expand All @@ -70,16 +70,6 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {

container.add( qRow );

// heightScale

var heightScaleRow = new UI.Row();
var heightScale = new UI.Number( parameters.heightScale ).onChange( update );

pRow.add( new UI.Text( 'Height scale' ).setWidth( '90px' ) );
pRow.add( heightScale );

container.add( heightScaleRow );


//

Expand All @@ -88,11 +78,10 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
editor.execute( new SetGeometryCommand( object, new THREE.TorusKnotGeometry(
radius.getValue(),
tube.getValue(),
radialSegments.getValue(),
tubularSegments.getValue(),
radialSegments.getValue(),
p.getValue(),
q.getValue(),
heightScale.getValue()
q.getValue()
) ) );

}
Expand Down
14 changes: 6 additions & 8 deletions examples/js/ParametricGeometries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,18 +170,16 @@ THREE.ParametricGeometries.TubeGeometry.prototype.constructor = THREE.Parametric
* Parametric Replacement for TorusKnotGeometry
*
*********************************************/
THREE.ParametricGeometries.TorusKnotGeometry = function ( radius, tube, segmentsR, segmentsT, p, q, heightScale ) {
THREE.ParametricGeometries.TorusKnotGeometry = function ( radius, tube, segmentsT, segmentsR, p, q ) {

var scope = this;

this.radius = radius || 200;
this.tube = tube || 40;
this.segmentsR = segmentsR || 64;
this.segmentsT = segmentsT || 8;
this.segmentsT = segmentsT || 64;
this.segmentsR = segmentsR || 8;
this.p = p || 2;
this.q = q || 3;
this.heightScale = heightScale || 1;


var TorusKnotCurve = THREE.Curve.create(

Expand All @@ -198,13 +196,13 @@ THREE.ParametricGeometries.TorusKnotGeometry = function ( radius, tube, segments
ty = ( 1 + r * Math.cos( q * t ) ) * Math.sin( p * t ),
tz = r * Math.sin( q * t );

return new THREE.Vector3( tx, ty * heightScale, tz ).multiplyScalar( radius );
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( radius );

}

);
var segments = segmentsR;
var radiusSegments = segmentsT;
var segments = segmentsT;
var radiusSegments = segmentsR;
var extrudePath = new TorusKnotCurve();

THREE.ParametricGeometries.TubeGeometry.call( this, extrudePath, segments, tube, radiusSegments, true, false );
Expand Down
8 changes: 3 additions & 5 deletions examples/webgl_geometries2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,17 @@
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
];


var heightScale = 1;
var p = 2;
var q = 3;
var radius = 150, tube = 10, segmentsR = 50, segmentsT = 20;
var radius = 150, tube = 10, segmentsT = 50, segmentsR = 20;

var GrannyKnot = new THREE.Curves.GrannyKnot();

var torus2 = new THREE.ParametricGeometries.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
var torus2 = new THREE.ParametricGeometries.TorusKnotGeometry( radius, tube, segmentsT, segmentsR, p , q );
var sphere2 = new THREE.ParametricGeometries.SphereGeometry( 75, 20, 10 );
var tube2 = new THREE.ParametricGeometries.TubeGeometry( GrannyKnot, 150, 2, 8, true, false );

// var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
// var torus = new THREE.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q );
// var sphere = new THREE.SphereGeometry( 75, 20, 10 );
// var tube = new THREE.TubeGeometry( GrannyKnot, 150, 2, 8, true, false );

Expand Down
50 changes: 24 additions & 26 deletions src/extras/geometries/TorusKnotBufferGeometry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*
* see: http://www.blackpawn.com/texts/pqtorus/
*/
THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubularSegments, p, q, heightScale, arc ) {
THREE.TorusKnotBufferGeometry = function ( radius, tube, tubularSegments, radialSegments, p, q, heightScale ) {

THREE.BufferGeometry.call( this );

Expand All @@ -12,22 +12,20 @@ THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubular
this.parameters = {
radius: radius,
tube: tube,
radialSegments: radialSegments,
tubularSegments: tubularSegments,
radialSegments: radialSegments,
p: p,
q: q,
heightScale: heightScale,
arc: arc
q: q
};

if( heightScale !== undefined ) console.warn( 'THREE.TorusKnotGeometry: heightScale has been deprecated. Use .scale( x, y, z ) instead.' );

radius = radius || 100;
tube = tube || 40;
radialSegments = Math.floor( radialSegments ) || 64;
tubularSegments = Math.floor( tubularSegments ) || 6;
tubularSegments = Math.floor( tubularSegments ) || 64;
radialSegments = Math.floor( radialSegments ) || 8;
p = p || 2;
q = q || 3;
heightScale = heightScale || 1;
arc = arc || Math.PI * 2;

// used to calculate buffer length
var vertexCount = ( ( radialSegments + 1 ) * ( tubularSegments + 1 ) );
Expand Down Expand Up @@ -55,17 +53,17 @@ THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubular

// generate vertices, normals and uvs

for ( i = 0; i <= radialSegments; ++ i ) {
for ( i = 0; i <= tubularSegments; ++ i ) {

// the radian "u" is used to calculate the position on the torus curve of the current radial segement
// the radian "u" is used to calculate the position on the torus curve of the current tubular segement

var u = i / radialSegments * p * arc;
var u = i / tubularSegments * p * Math.PI * 2;

// now we calculate two points. P1 is our current position on the curve, P2 is a little farther ahead.
// these points are used to create a special "coordinate space", which is necessary to calculate the correct vertex positions

calculatePositionOnCurve( u, p, q, radius, heightScale, P1 );
calculatePositionOnCurve( u + 0.01, p, q, radius, heightScale, P2 );
calculatePositionOnCurve( u, p, q, radius, P1 );
calculatePositionOnCurve( u + 0.01, p, q, radius, P2 );

// calculate orthonormal basis

Expand All @@ -79,12 +77,12 @@ THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubular
B.normalize();
N.normalize();

for ( j = 0; j <= tubularSegments; ++ j ) {
for ( j = 0; j <= radialSegments; ++ j ) {

// now calculate the vertices. they are nothing more than an extrusion of the torus curve.
// because we extrude a shape in the xy-plane, there is no need to calculate a z-value.

var v = j / tubularSegments * Math.PI * 2;
var v = j / radialSegments * Math.PI * 2;
var cx = - tube * Math.cos( v );
var cy = tube * Math.sin( v );

Expand All @@ -103,8 +101,8 @@ THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubular
normals.setXYZ( index, normal.x, normal.y, normal.z );

// uv
uv.x = i / radialSegments;
uv.y = j / tubularSegments;
uv.x = i / tubularSegments;
uv.y = j / radialSegments;
uvs.setXY( index, uv.x, uv.y );

// increase index
Expand All @@ -116,15 +114,15 @@ THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubular

// generate indices

for ( j = 1; j <= radialSegments; j ++ ) {
for ( j = 1; j <= tubularSegments; j ++ ) {

for ( i = 1; i <= tubularSegments; i ++ ) {
for ( i = 1; i <= radialSegments; i ++ ) {

// indices
var a = ( tubularSegments + 1 ) * ( j - 1 ) + ( i - 1 );
var b = ( tubularSegments + 1 ) * j + ( i - 1 );
var c = ( tubularSegments + 1 ) * j + i;
var d = ( tubularSegments + 1 ) * ( j - 1 ) + i;
var a = ( radialSegments + 1 ) * ( j - 1 ) + ( i - 1 );
var b = ( radialSegments + 1 ) * j + ( i - 1 );
var c = ( radialSegments + 1 ) * j + i;
var d = ( radialSegments + 1 ) * ( j - 1 ) + i;

// face one
indices.setX( indexOffset, a ); indexOffset++;
Expand All @@ -149,7 +147,7 @@ THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubular

// this function calculates the current position on the torus curve

function calculatePositionOnCurve( u, p, q, radius, heightScale, position ) {
function calculatePositionOnCurve( u, p, q, radius, position ) {

var cu = Math.cos( u );
var su = Math.sin( u );
Expand All @@ -158,7 +156,7 @@ THREE.TorusKnotBufferGeometry = function ( radius, tube, radialSegments, tubular

position.x = radius * ( 2 + cs ) * 0.5 * cu;
position.y = radius * ( 2 + cs ) * su * 0.5;
position.z = heightScale * radius * Math.sin( quOverP ) * 0.5;
position.z = radius * Math.sin( quOverP ) * 0.5;

}

Expand Down
Loading

0 comments on commit 8430065

Please sign in to comment.