Skip to content

Commit

Permalink
fixed ParametricGeometry bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@zz85
zz85 committed Apr 19, 2012
1 parent 3e70070 commit 8377d93
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 63 deletions.
85 changes: 50 additions & 35 deletions examples/webgl_geometries2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
font-family: Monospace;
background-color: #000;
margin: 0px;
overflow: hidden;
/*overflow: hidden;*/
}
</style>
</head>
Expand All @@ -22,6 +22,7 @@

<script src="js/CurveExtras.js"></script>

<script src="js/UVsUtils.js"></script>
<script src="../src/extras/geometries/ParametricGeometry.js"></script>
<script src="../src/extras/geometries/ParametricGeometries.js"></script>
<script>
Expand Down Expand Up @@ -68,13 +69,13 @@
var q = 3;
var radius = 150, tube = 10, segmentsR = 50, segmentsT = 20;

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


// var benchmarkCopies = 1000;
Expand All @@ -86,46 +87,60 @@
// scene.add( object );
// }

object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
console.log(THREE.ParametricGeometries);
var geo = new THREE.ParametricGeometry(20, 20, THREE.ParametricGeometries.klein);
object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
object.children[ 0 ].doubleSided = true;
object.position.set( 0, 0, 0 );
object.scale.multiplyScalar(10);
scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
object.position.set( 0, 100, 0 );
scene.add( object );
// var geo = new THREE.ParametricGeometry(10, 10, THREE.ParametricGeometries.plane(200, 200));
THREE.UVsDebug( geo );
document.body.appendChild( THREE.UVsDebug( geo ));
object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );


object.children[ 0 ].doubleSided = true;
// object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
// object.position.set( 0, 0, 0 );
// scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
object.position.set( 500, 0, 0 );
scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( torus2, materials );
// object.position.set( 0, 100, 0 );
// scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
object.position.set( 200, 0, 0 );
scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
object.position.set( 0, 0, 0 );
scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
object.position.set( 100, 0, 0 );
scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
object.position.set( 100, 0, 0 );
scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
// object.position.set( 500, 0, 0 );
// scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
// object.children[ 0 ].doubleSided = true;
object.position.set( -200, 100, 0 );
scene.add( object );
// object = THREE.SceneUtils.createMultiMaterialObject( sphere2, materials );
// object.position.set( 200, 0, 0 );
// scene.add( object );

// object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
// object.position.set( 0, 0, 0 );
// scene.add( object );

// object = THREE.SceneUtils.createMultiMaterialObject( tube2, materials );
// object.position.set( 100, 0, 0 );
// scene.add( object );

object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ParametricGeometry(10, 10, klein) , materials );
// object.position.set( 100, 0, 0 );
// scene.add( object );

// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 400, 400, 4, 4 ), materials );
// // object.children[ 0 ].doubleSided = true;
// object.position.set( -200, 100, 0 );
// scene.add( object );

// object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry2( 400, 400, 4, 4 ), materials );
// object.children[ 0 ].doubleSided = true;
object.position.set( -200, 100, 0 );
scene.add( object );
// object.position.set( -200, 100, 0 );
// scene.add( object );

object = new THREE.AxisHelper();
object.position.set( 200, 0, -200 );
Expand Down
49 changes: 30 additions & 19 deletions src/extras/geometries/ParametricGeometries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,29 +121,41 @@ THREE.TubeGeometry2.prototype.constructor = THREE.TubeGeometry2;
THREE.TorusKnotGeometry2.prototype = new THREE.Geometry();
THREE.TorusKnotGeometry2.prototype.constructor = THREE.TorusKnotGeometry2;


var sin = Math.sin, cos = Math.cos, pi = Math.PI;

THREE.ParametricGeometries = {
klein: function (v, u) {
u *= pi;
v *= 2 * pi;

u = u * 2;
var x, y, z;
if (u < pi) {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
} else {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
z = -8 * sin(u);
}

y = -2 * (1 - cos(u) / 2) * sin(v);

return new THREE.Vector3(x, y, z);
},

plane: function (width, height) {

return function(u, v) {
var x = u * width;
var y = 0;
var z = v * height;

function klein(u, v) {
u *= pi;
v *= 2 * pi;
console.log(x, y, z);

u = u * 2;
var x, y, z;
if (u < pi) {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(u) * cos(v);
z = -8 * sin(u) - 2 * (1 - cos(u) / 2) * sin(u) * cos(v);
} else {
x = 3 * cos(u) * (1 + sin(u)) + (2 * (1 - cos(u) / 2)) * cos(v + pi);
z = -8 * sin(u);
return new THREE.Vector3(x, y, z);
};
}

y = -2 * (1 - cos(u) / 2) * sin(v);

return new THREE.Vector3(x, y, z);
}

};


THREE.SphereGeometry2 = function(size, x, y) {
Expand Down Expand Up @@ -171,7 +183,6 @@ THREE.PlaneGeometry2 = function(width, depth, segmentsWidth, segmentsDepth) {

function plane(u, v) {

console.log('u, v', u, v);
var x = u * width;
var y = 0;
var z = v * depth;
Expand Down
21 changes: 12 additions & 9 deletions src/extras/geometries/ParametricGeometry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {
var i, il, j, p;
var u, v;

var stackCount = stacks + 1;
var sliceCount = slices + 1;

for ( i = 0; i <= stacks; i ++ ) {

v = i / stacks;
Expand All @@ -33,34 +36,34 @@ THREE.ParametricGeometry = function ( slices, stacks, func ) {

var v = 0, next;
var a, b, c, d;
var uva, uvb, ubc, uvd;
var uva, uvb, uvc, uvd;

// Some UV / Face orientation work needs to be done here...
for ( i = 0; i < stacks; i ++ ) {
for ( j = 0; j < slices; j ++ ) {

a = i * stacks + j;
b = i * stacks + j + 1;
c = (i + 1) * stacks + j;
d = (i + 1) * stacks + j + 1;
a = i * stackCount + j;
b = i * stackCount + j + 1;
c = (i + 1) * stackCount + j;
d = (i + 1) * stackCount + j + 1;

uva = new THREE.UV( i / slices, j / stacks );
uvb = new THREE.UV( i / slices, ( j + 1 ) / stacks );
uvc = new THREE.UV( ( i + 1 ) / slices, j / stacks );
uvd = new THREE.UV( ( i + 1 ) / slices, ( j + 1 ) / stacks );


faces.push( new THREE.Face3( a, b, c ) );
faces.push( new THREE.Face3( b, d, c ) );

uvs.push( [ uva, ubc, uvc ] );
uvs.push( [ uva, uvb, uvc ] );
uvs.push( [ uvb, uvd, uvc ] );
}

}

console.log(this);

// magic bullet
// this.mergeVertices();
this.mergeVertices();

this.computeCentroids();
this.computeFaceNormals();
Expand Down

9 comments on commit 8377d93

@alteredq
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, now we have Klein bottle, sweet ;)

@zz85
Copy link
Contributor Author

@zz85 zz85 commented on 8377d93 Apr 20, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and mobius strip :)

@mrdoob
Copy link
Owner

@mrdoob mrdoob commented on 8377d93 Apr 20, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! :D Is it possible to have it flat? Or does this code requires the shape to be closed?

Btw, I think this is related: http://jsdo.it/c5h12/iCYB

@zz85
Copy link
Contributor Author

@zz85 zz85 commented on 8377d93 Apr 20, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, the flat version is the lines of code which i comment out. i thought the 3d mobius looked better. perhaps have THREE.ParametricGeometries.mobius and THREE.ParametricGeometries.mobius3d ?

@alteredq
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, you are on the roll ;).

@zz85
Copy link
Contributor Author

@zz85 zz85 commented on 8377d93 Apr 20, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pretty interesting that shader from jsdo.it (some how that shader compilation fails on my mac, but runs on windows :)

certainly possible to do that here too, just don't merge vertices.. and tween the positions :)

@mrdoob
Copy link
Owner

@mrdoob mrdoob commented on 8377d93 Apr 20, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, the flat version is the lines of code which i comment out. i thought the 3d mobius looked better.

Ah! I see I see! Yeah, I was just used to see it flat :)

@zz85
Copy link
Contributor Author

@zz85 zz85 commented on 8377d93 Apr 20, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

watch this musical mobius strip when you have time :) http://www.youtube.com/watch?v=xUHQ2ybTejU

@mrdoob
Copy link
Owner

@mrdoob mrdoob commented on 8377d93 Apr 20, 2012

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I saw that on your twitter. Pretty amazing :D

Please sign in to comment.