Unflipped UVs for TorusGeometry.

Not really sure what to do with UVs for remaining geometries - they are either quite arbitrary or anyways not working well so far.

Also did some housekeeping for more geometry examples.

build/Three.js

@@ -680,8 +680,8 @@ THREE.SphereGeometry=function(a,b,c,d,e,f,g){THREE.Geometry.call(this);var a=a||
 a){this.faces.push(new THREE.Face3(d,e,f,[m,n,p]));this.faceVertexUvs[0].push([o,q,s])}else{this.faces.push(new THREE.Face4(d,e,f,g,[m,n,p,r]));this.faceVertexUvs[0].push([o,q,s,x])}}this.computeCentroids();this.computeFaceNormals();this.boundingSphere={radius:a}};THREE.SphereGeometry.prototype=Object.create(THREE.Geometry.prototype);
 THREE.TextGeometry=function(a,b){var c=THREE.FontUtils.generateShapes(a,b);b.amount=b.height!==void 0?b.height:50;if(b.bevelThickness===void 0)b.bevelThickness=10;if(b.bevelSize===void 0)b.bevelSize=8;if(b.bevelEnabled===void 0)b.bevelEnabled=false;if(b.bend){var d=c[c.length-1].getBoundingBox().maxX;b.bendPath=new THREE.QuadraticBezierCurve(new THREE.Vector2(0,0),new THREE.Vector2(d/2,120),new THREE.Vector2(d,0))}THREE.ExtrudeGeometry.call(this,c,b)};THREE.TextGeometry.prototype=Object.create(THREE.ExtrudeGeometry.prototype);
 THREE.TorusGeometry=function(a,b,c,d,e){THREE.Geometry.call(this);this.radius=a||100;this.tube=b||40;this.segmentsR=c||8;this.segmentsT=d||6;this.arc=e||Math.PI*2;e=new THREE.Vector3;a=[];b=[];for(c=0;c<=this.segmentsR;c++)for(d=0;d<=this.segmentsT;d++){var f=d/this.segmentsT*this.arc,g=c/this.segmentsR*Math.PI*2;e.x=this.radius*Math.cos(f);e.y=this.radius*Math.sin(f);var h=new THREE.Vector3;h.x=(this.radius+this.tube*Math.cos(g))*Math.cos(f);h.y=(this.radius+this.tube*Math.cos(g))*Math.sin(f);h.z=
-this.tube*Math.sin(g);this.vertices.push(h);a.push(new THREE.UV(d/this.segmentsT,1-c/this.segmentsR));b.push(h.clone().subSelf(e).normalize())}for(c=1;c<=this.segmentsR;c++)for(d=1;d<=this.segmentsT;d++){var e=(this.segmentsT+1)*c+d-1,f=(this.segmentsT+1)*(c-1)+d-1,g=(this.segmentsT+1)*(c-1)+d,h=(this.segmentsT+1)*c+d,i=new THREE.Face4(e,f,g,h,[b[e],b[f],b[g],b[h]]);i.normal.addSelf(b[e]);i.normal.addSelf(b[f]);i.normal.addSelf(b[g]);i.normal.addSelf(b[h]);i.normal.normalize();this.faces.push(i);
-this.faceVertexUvs[0].push([a[e].clone(),a[f].clone(),a[g].clone(),a[h].clone()])}this.computeCentroids()};THREE.TorusGeometry.prototype=Object.create(THREE.Geometry.prototype);
+this.tube*Math.sin(g);this.vertices.push(h);a.push(new THREE.UV(d/this.segmentsT,c/this.segmentsR));b.push(h.clone().subSelf(e).normalize())}for(c=1;c<=this.segmentsR;c++)for(d=1;d<=this.segmentsT;d++){var e=(this.segmentsT+1)*c+d-1,f=(this.segmentsT+1)*(c-1)+d-1,g=(this.segmentsT+1)*(c-1)+d,h=(this.segmentsT+1)*c+d,i=new THREE.Face4(e,f,g,h,[b[e],b[f],b[g],b[h]]);i.normal.addSelf(b[e]);i.normal.addSelf(b[f]);i.normal.addSelf(b[g]);i.normal.addSelf(b[h]);i.normal.normalize();this.faces.push(i);this.faceVertexUvs[0].push([a[e].clone(),
+a[f].clone(),a[g].clone(),a[h].clone()])}this.computeCentroids()};THREE.TorusGeometry.prototype=Object.create(THREE.Geometry.prototype);
 THREE.TorusKnotGeometry=function(a,b,c,d,e,f,g){function h(a,b,c,d,e,f){var g=Math.cos(a);Math.cos(b);b=Math.sin(a);a=c/d*a;c=Math.cos(a);g=e*(2+c)*0.5*g;b=e*(2+c)*b*0.5;e=f*e*Math.sin(a)*0.5;return new THREE.Vector3(g,b,e)}THREE.Geometry.call(this);this.radius=a||200;this.tube=b||40;this.segmentsR=c||64;this.segmentsT=d||8;this.p=e||2;this.q=f||3;this.heightScale=g||1;this.grid=Array(this.segmentsR);c=new THREE.Vector3;d=new THREE.Vector3;e=new THREE.Vector3;for(a=0;a<this.segmentsR;++a){this.grid[a]=
 Array(this.segmentsT);for(b=0;b<this.segmentsT;++b){var i=a/this.segmentsR*2*this.p*Math.PI,g=b/this.segmentsT*2*Math.PI,f=h(i,g,this.q,this.p,this.radius,this.heightScale),i=h(i+0.01,g,this.q,this.p,this.radius,this.heightScale);c.sub(i,f);d.add(i,f);e.cross(c,d);d.cross(e,c);e.normalize();d.normalize();i=-this.tube*Math.cos(g);g=this.tube*Math.sin(g);f.x=f.x+(i*d.x+g*e.x);f.y=f.y+(i*d.y+g*e.y);f.z=f.z+(i*d.z+g*e.z);this.grid[a][b]=this.vertices.push(new THREE.Vector3(f.x,f.y,f.z))-1}}for(a=0;a<
 this.segmentsR;++a)for(b=0;b<this.segmentsT;++b){var e=(a+1)%this.segmentsR,f=(b+1)%this.segmentsT,c=this.grid[a][b],d=this.grid[e][b],e=this.grid[e][f],f=this.grid[a][f],g=new THREE.UV(a/this.segmentsR,b/this.segmentsT),i=new THREE.UV((a+1)/this.segmentsR,b/this.segmentsT),j=new THREE.UV((a+1)/this.segmentsR,(b+1)/this.segmentsT),l=new THREE.UV(a/this.segmentsR,(b+1)/this.segmentsT);this.faces.push(new THREE.Face4(c,d,e,f));this.faceVertexUvs[0].push([g,i,j,l])}this.computeCentroids();this.computeFaceNormals();

build/custom/ThreeExtras.js

@@ -217,8 +217,8 @@ THREE.SphereGeometry=function(b,a,c,d,e,f,g){THREE.Geometry.call(this);var b=b||
 b){this.faces.push(new THREE.Face3(d,e,f,[m,n,k]));this.faceVertexUvs[0].push([q,p,s])}else{this.faces.push(new THREE.Face4(d,e,f,g,[m,n,k,o]));this.faceVertexUvs[0].push([q,p,s,u])}}this.computeCentroids();this.computeFaceNormals();this.boundingSphere={radius:b}};THREE.SphereGeometry.prototype=Object.create(THREE.Geometry.prototype);
 THREE.TextGeometry=function(b,a){var c=THREE.FontUtils.generateShapes(b,a);a.amount=a.height!==void 0?a.height:50;if(a.bevelThickness===void 0)a.bevelThickness=10;if(a.bevelSize===void 0)a.bevelSize=8;if(a.bevelEnabled===void 0)a.bevelEnabled=false;if(a.bend){var d=c[c.length-1].getBoundingBox().maxX;a.bendPath=new THREE.QuadraticBezierCurve(new THREE.Vector2(0,0),new THREE.Vector2(d/2,120),new THREE.Vector2(d,0))}THREE.ExtrudeGeometry.call(this,c,a)};THREE.TextGeometry.prototype=Object.create(THREE.ExtrudeGeometry.prototype);
 THREE.TorusGeometry=function(b,a,c,d,e){THREE.Geometry.call(this);this.radius=b||100;this.tube=a||40;this.segmentsR=c||8;this.segmentsT=d||6;this.arc=e||Math.PI*2;e=new THREE.Vector3;b=[];a=[];for(c=0;c<=this.segmentsR;c++)for(d=0;d<=this.segmentsT;d++){var f=d/this.segmentsT*this.arc,g=c/this.segmentsR*Math.PI*2;e.x=this.radius*Math.cos(f);e.y=this.radius*Math.sin(f);var h=new THREE.Vector3;h.x=(this.radius+this.tube*Math.cos(g))*Math.cos(f);h.y=(this.radius+this.tube*Math.cos(g))*Math.sin(f);h.z=
-this.tube*Math.sin(g);this.vertices.push(h);b.push(new THREE.UV(d/this.segmentsT,1-c/this.segmentsR));a.push(h.clone().subSelf(e).normalize())}for(c=1;c<=this.segmentsR;c++)for(d=1;d<=this.segmentsT;d++){var e=(this.segmentsT+1)*c+d-1,f=(this.segmentsT+1)*(c-1)+d-1,g=(this.segmentsT+1)*(c-1)+d,h=(this.segmentsT+1)*c+d,i=new THREE.Face4(e,f,g,h,[a[e],a[f],a[g],a[h]]);i.normal.addSelf(a[e]);i.normal.addSelf(a[f]);i.normal.addSelf(a[g]);i.normal.addSelf(a[h]);i.normal.normalize();this.faces.push(i);
-this.faceVertexUvs[0].push([b[e].clone(),b[f].clone(),b[g].clone(),b[h].clone()])}this.computeCentroids()};THREE.TorusGeometry.prototype=Object.create(THREE.Geometry.prototype);
+this.tube*Math.sin(g);this.vertices.push(h);b.push(new THREE.UV(d/this.segmentsT,c/this.segmentsR));a.push(h.clone().subSelf(e).normalize())}for(c=1;c<=this.segmentsR;c++)for(d=1;d<=this.segmentsT;d++){var e=(this.segmentsT+1)*c+d-1,f=(this.segmentsT+1)*(c-1)+d-1,g=(this.segmentsT+1)*(c-1)+d,h=(this.segmentsT+1)*c+d,i=new THREE.Face4(e,f,g,h,[a[e],a[f],a[g],a[h]]);i.normal.addSelf(a[e]);i.normal.addSelf(a[f]);i.normal.addSelf(a[g]);i.normal.addSelf(a[h]);i.normal.normalize();this.faces.push(i);this.faceVertexUvs[0].push([b[e].clone(),
+b[f].clone(),b[g].clone(),b[h].clone()])}this.computeCentroids()};THREE.TorusGeometry.prototype=Object.create(THREE.Geometry.prototype);
 THREE.TorusKnotGeometry=function(b,a,c,d,e,f,g){function h(a,b,c,d,e,f){var g=Math.cos(a);Math.cos(b);b=Math.sin(a);a=c/d*a;c=Math.cos(a);g=e*(2+c)*0.5*g;b=e*(2+c)*b*0.5;e=f*e*Math.sin(a)*0.5;return new THREE.Vector3(g,b,e)}THREE.Geometry.call(this);this.radius=b||200;this.tube=a||40;this.segmentsR=c||64;this.segmentsT=d||8;this.p=e||2;this.q=f||3;this.heightScale=g||1;this.grid=Array(this.segmentsR);c=new THREE.Vector3;d=new THREE.Vector3;e=new THREE.Vector3;for(b=0;b<this.segmentsR;++b){this.grid[b]=
 Array(this.segmentsT);for(a=0;a<this.segmentsT;++a){var i=b/this.segmentsR*2*this.p*Math.PI,g=a/this.segmentsT*2*Math.PI,f=h(i,g,this.q,this.p,this.radius,this.heightScale),i=h(i+0.01,g,this.q,this.p,this.radius,this.heightScale);c.sub(i,f);d.add(i,f);e.cross(c,d);d.cross(e,c);e.normalize();d.normalize();i=-this.tube*Math.cos(g);g=this.tube*Math.sin(g);f.x=f.x+(i*d.x+g*e.x);f.y=f.y+(i*d.y+g*e.y);f.z=f.z+(i*d.z+g*e.z);this.grid[b][a]=this.vertices.push(new THREE.Vector3(f.x,f.y,f.z))-1}}for(b=0;b<
 this.segmentsR;++b)for(a=0;a<this.segmentsT;++a){var e=(b+1)%this.segmentsR,f=(a+1)%this.segmentsT,c=this.grid[b][a],d=this.grid[e][a],e=this.grid[e][f],f=this.grid[b][f],g=new THREE.UV(b/this.segmentsR,a/this.segmentsT),i=new THREE.UV((b+1)/this.segmentsR,a/this.segmentsT),j=new THREE.UV((b+1)/this.segmentsR,(a+1)/this.segmentsT),l=new THREE.UV(b/this.segmentsR,(a+1)/this.segmentsT);this.faces.push(new THREE.Face4(c,d,e,f));this.faceVertexUvs[0].push([g,i,j,l])}this.computeCentroids();this.computeFaceNormals();

examples/webgl_geometries.html

@@ -49,13 +49,15 @@
 				light.position.set( 0, 1, 0 );
 				scene.add( light );
 
+				var map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
+				map.wrapS = map.wrapT = THREE.RepeatWrapping;
+				map.anisotropy = 16;
+
 				materials = [
-					new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' ), side: THREE.DoubleSide } ),
+					new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } ),
 					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
 				];
 
-				materials[ 0 ].map.anisotropy = 16;
-
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
 				object.position.set( -200, 0, 400 );
 				scene.add( object );

examples/webgl_geometries2.html

@@ -60,9 +60,13 @@
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
+				var map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
+				map.wrapS = map.wrapT = THREE.RepeatWrapping;
+				map.anisotropy = 16;
+
 				materials = [
-					new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' ), side: THREE.DoubleSide } ),
-					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, doubleSided: true } )
+					new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } ),
+					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
 				];
 
 
@@ -72,12 +76,14 @@
 				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.ParametricGeometries.TorusKnotGeometry( radius, tube, segmentsR, segmentsT, p , q, heightScale );
-				// var sphere = new THREE.SphereGeometry( 75, 20, 10 );
 				var sphere2 = new THREE.ParametricGeometries.SphereGeometry( 75, 20, 10 );
-				// var tube = new THREE.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
-				var tube2 = new THREE.ParametricGeometries.TubeGeometry(GrannyKnot, 150, 2, 8, true, false);
+				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 sphere = new THREE.SphereGeometry( 75, 20, 10 );
+				// var tube = new THREE.TubeGeometry( GrannyKnot, 150, 2, 8, true, false );
 
 
 				// var benchmarkCopies = 1000;
@@ -94,7 +100,7 @@
 
 				// Klein Bottle
 
-				geo = new THREE.ParametricGeometry(THREE.ParametricGeometries.klein, 20, 20);
+				geo = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 20, 20 );
 				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 				object.position.set( 0, 0, 0 );
 				object.scale.multiplyScalar( 10 );
@@ -102,13 +108,13 @@
 
 				// Mobius Strip
 
-				geo = new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius, 20, 20);
+				geo = new THREE.ParametricGeometry( THREE.ParametricGeometries.mobius, 20, 20 );
 				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 				object.position.set( 10, 0, 0 );
 				object.scale.multiplyScalar( 100 );
 				scene.add( object );
 
-				var geo = new THREE.ParametricGeometry(THREE.ParametricGeometries.plane(200, 200), 10, 20);
+				var geo = new THREE.ParametricGeometry( THREE.ParametricGeometries.plane( 200, 200 ), 10, 20 );
 				// document.body.appendChild( THREE.UVsDebug( geo ));
 				object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
 				object.position.set( 0, 0, 0 );
@@ -209,8 +215,8 @@
 
 					var object = scene.children[ i ];
 
-					object.rotation.x += 0.01;
-					object.rotation.y += 0.005;
+					object.rotation.x = timer * 5;
+					object.rotation.y = timer * 2.5;
 
 				}
 

examples/webgl_geometry_convex.html

@@ -48,13 +48,18 @@
 				light.position.set( 0, 1, 0 );
 				scene.add( light );
 
+				var map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
+				map.wrapS = map.wrapT = THREE.RepeatWrapping;
+				map.anisotropy = 16;
+
 				materials = [
-					new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' ) } ),
+					new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map } ),
 					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1 } )
 				];
 
 
 				// tetrahedron
+
 				var points = [
 					new THREE.Vector3( 100, 0, 0 ),
 					new THREE.Vector3( 0, 100, 0 ),
@@ -67,6 +72,7 @@
 				scene.add( object );
 
 				// cube
+
 				var points = [
 					new THREE.Vector3( 50, 50, 50 ),
 					new THREE.Vector3( 50, 50, -50 ),
@@ -83,9 +89,12 @@
 				scene.add( object );
 
 				// random convex
+
 				points = [];
-				for ( var i = 0; i < 30; i++ ) {
+				for ( var i = 0; i < 30; i ++ ) {
+
 					points.push( randomPointInSphere( 50 ) );
+
 				}
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points ), materials );
@@ -160,8 +169,8 @@
 
 					var object = scene.children[ i ];
 
-					object.rotation.x += 0.01;
-					object.rotation.y += 0.005;
+					object.rotation.x = timer * 5;
+					object.rotation.y = timer * 2.5;
 
 				}
 

src/extras/geometries/ParametricGeometry.js

@@ -3,7 +3,7 @@
  * Parametric Surfaces Geometry
  * based on the brilliant article by @prideout http://prideout.net/blog/?p=44
  *
- * new THREE.ParametricGeometry( parametricFunction, uSements, ySegements, useTris );
+ * new THREE.ParametricGeometry( parametricFunction, uSegments, ySegements, useTris );
  *
  */
 
@@ -22,7 +22,7 @@ THREE.ParametricGeometry = function ( func, slices, stacks, useTris ) {
 
 	var stackCount = stacks + 1;
 	var sliceCount = slices + 1;
-	
+
 	for ( i = 0; i <= stacks; i ++ ) {
 
 		v = i / stacks;
@@ -41,6 +41,7 @@ THREE.ParametricGeometry = function ( func, slices, stacks, useTris ) {
 	var uva, uvb, uvc, uvd;
 
 	for ( i = 0; i < stacks; i ++ ) {
+
 		for ( j = 0; j < slices; j ++ ) {
 
 			a = i * sliceCount + j;
@@ -69,7 +70,7 @@ THREE.ParametricGeometry = function ( func, slices, stacks, useTris ) {
 			}
 
 		}
-		
+
 	}
 
 	// console.log(this);
@@ -77,7 +78,7 @@ THREE.ParametricGeometry = function ( func, slices, stacks, useTris ) {
 	// magic bullet
 	// var diff = this.mergeVertices();
 	// console.log('removed ', diff, ' vertices by merging');
-	
+
 	this.computeCentroids();
 	this.computeFaceNormals();
 	this.computeVertexNormals();

src/extras/geometries/TorusGeometry.js

@@ -35,7 +35,7 @@ THREE.TorusGeometry = function ( radius, tube, segmentsR, segmentsT, arc ) {
 
 			this.vertices.push( vertex );
 
-			uvs.push( new THREE.UV( i / this.segmentsT, 1 - j / this.segmentsR ) );
+			uvs.push( new THREE.UV( i / this.segmentsT, j / this.segmentsR ) );
 			normals.push( vertex.clone().subSelf( center ).normalize() );
 
 		}