Merge branch 'master' of github.com:zz85/three.js

b3ce020a · zz85 · 7aba6e97 · 77e3d62d · b3ce020a · b3ce020a
Showing with 198 addition and 73 deletion

examples/js/UVsUtils.js examples/js/UVsUtils.js +83 -1

examples/misc_uv_tests.html examples/misc_uv_tests.html +111 -0

examples/webgl_geometry_extrude_uvs2.html examples/webgl_geometry_extrude_uvs2.html +4 -72

未找到文件。
--- a/examples/js/UVsUtils.js
+++ b/examples/js/UVsUtils.js
+/*
+ * @author gyuque / https://github.com/gyuque
+ *
+ * Cylinder Mapping for ExtrudeGeometry
+ *
+ */
+
+THREE.UVsUtils = {
+
+};
+
+THREE.UVsUtils.CylinderUVGenerator = function() {
+    this.uRepeat = 1;
+    this.targetGeometry = null;
+    this.lengthCache = null;
+};
+
+THREE.UVsUtils.CylinderUVGenerator.prototype = {
+    generateTopUV: THREE.ExtrudeGeometry.WorldUVGenerator.generateTopUV,
+    generateBottomUV: THREE.ExtrudeGeometry.WorldUVGenerator.generateBottomUV,
+    
+    generateSideWallUV: function( geometry, extrudedShape, wallContour, extrudeOptions,
+                                  indexA, indexB, indexC, indexD, stepIndex, stepsLength,
+                                  contourIndex1, contourIndex2 ) {
+        // first call
+        if (this.targetGeometry !== geometry) {
+            this.prepare(geometry, wallContour);
+        }
+
+        // generate uv
+        var u_list = this.lengthCache;
+        var v1 = stepIndex / stepsLength;
+        var v2 = ( stepIndex + 1 ) / stepsLength;
+        
+        var u1 = u_list[contourIndex1];
+        var u2 = u_list[contourIndex2];
+        if (u1 < u2) {u1 += 1.0;}
+        
+        u1 *= this.uRepeat;
+        u2 *= this.uRepeat;
+        return [
+            new THREE.UV( u1, v1 ),
+            new THREE.UV( u2, v1 ),
+            new THREE.UV( u2, v2 ),
+            new THREE.UV( u1, v2 )
+        ];
+    },
+    
+    prepare: function(geometry, wallContour) {
+        var p1, p2;
+        var u_list = [];
+        var lengthSum = 0;
+        var len = wallContour.length;
+        for (var i = 0;i < len;i++) {
+            p1 = wallContour[ i ];
+            p2 = wallContour[ (i+1) % len ];
+
+            var dx = p1.x - p2.x;
+            var dy = p1.y - p2.y;
+            var segmentLength = Math.sqrt(dx*dx + dy*dy);
+            
+            u_list.push(lengthSum);
+            lengthSum += segmentLength;
+        }
+        
+        this.normalizeArray(u_list, lengthSum);
+        this.targetGeometry = geometry;
+        this.lengthCache = u_list;
+    },
+    
+    normalizeArray: function(ls, v) {
+        var len = ls.length;
+        for (var i = 0;i < len;i++) {
+            ls[i] /= v;
+        }
+        
+        return ls;
+    }
+};
+
+
+
 /* 
- * @author https://github.com/zz85 | @blurspline
+ * @author zz85 / https://github.com/zz85
 *
 * tool for "unwrapping" and debugging three.js 
 * geometries UV mapping

--- a/examples/misc_uv_tests.html
+++ b/examples/misc_uv_tests.html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>three.js - uv mapping tests</title>
+<style>
+  article, aside, figure, footer, header, hgroup, 
+  menu, nav, section { display: block; }
+</style>
+  <script src="../build/Three.js"></script>
+  <script src="js/UVsUtils.js"></script>
+
+</head>
+<body>
+  <b id="hello">Doing UV wrap tests here!</b>
+  <i>Please wait while it loads</i>
+  <script>
+/* 
+ * This is to help debug UVs problems in geometry, 
+ * as well as allow a new user to visualize what UVs are about. 
+ */
+
+
+function test(name, geometry) {
+  
+  var d = document.createElement('div');
+  d.innerHTML = '<br><br>' + name + '<br>';
+  d.appendChild(THREE.UVsDebug(geometry));
+  document.body.appendChild(d);
+  
+}
+
+
+test('new THREE.PlaneGeometry( 100, 100, 4, 4 )', new THREE.PlaneGeometry( 100, 100, 4, 4 ));
+test('new THREE.SphereGeometry( 75, 12, 6 )', new THREE.SphereGeometry( 75, 12, 6 ));
+
+test('new THREE.IcosahedronGeometry( 30, 1 )', new THREE.IcosahedronGeometry( 30, 1 ));
+test('new THREE.OctahedronGeometry( 30, 2 )', new THREE.OctahedronGeometry( 30, 2 ));
+
+test('new THREE.CylinderGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderGeometry( 25, 75, 100, 10, 5 ));
+
+test('new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ));
+
+var points = [];
+
+for ( var i = 0; i < 10; i ++ ) {
+
+    points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );
+
+}
+
+
+test('new THREE.LatheGeometry( points, 8 )', new THREE.LatheGeometry( points, 8 ));
+test('new THREE.TorusGeometry( 50, 20, 8, 8 )', new THREE.TorusGeometry( 50, 20, 8, 8 ));
+test('new THREE.TorusKnotGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotGeometry( 50, 10, 12, 6 ));
+
+/*
+Not sure how UVs for ExtrudeGeometry are done currently...
+*/
+
+var pts = [], starPoints = 5, l;
+for (i=0; i<starPoints*2;i++) {
+  if (i%2==1) {
+    l = 5;
+  } else {
+    l = 10;
+  }
+
+  var a = i / starPoints * Math.PI;
+  pts.push(new THREE.Vector2(Math.cos(a) * l,Math.sin(a) * l ));
+}
+var starShape = new THREE.Shape(pts);
+var extrudeSettings = { amount: 200,  bevelEnabled: true, bevelSegments: 2, steps: 10 }; 
+
+test('new THREE.ExtrudeGeometry(starShape, extrudeSettings);', new THREE.ExtrudeGeometry(starShape, extrudeSettings));
+
+var uvGenerator = new THREE.UVsUtils.CylinderUVGenerator();
+		testShape = setupShape(8, 3);
+		holeShape = setupShape(8, 2);
+		testShape.holes.push(holeShape);
+
+function setupShape(n, r) {
+		// Make shape
+		var sh = new THREE.Shape();
+		for (var i = 0; i < n;i++) {
+			var method = i ? 'lineTo' : 'moveTo';
+			var a = (i/n) * Math.PI * 2;
+			var x = Math.cos(a) * r;
+			var y = Math.sin(a) * r;
+			sh[method](x, y);
+		}
+
+		return sh;
+	}
+
+var exoption = {
+	bevelEnabled: true,
+	bevelSize: 1,
+	amount: 3,
+	extrudeMaterial: 0,
+	material: 1,
+	uvGenerator: uvGenerator
+};
+
+var geom = testShape.extrude(exoption);
+test('new THREE.ExtrudeGeometry with CylinderUVGenerator;', geom);
+
+
+  </script>
+</body>
+</html>
\ No newline at end of file
--- a/examples/webgl_geometry_extrude_uvs2.html
+++ b/examples/webgl_geometry_extrude_uvs2.html
@@ -4,6 +4,8 @@
 		<title>three.js webgl - UV mapped ExtrudeGeometry</title>
 		
 		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="js/UVsUtils.js"></script>
+
 		<script type="text/javascript">
 (function(){
 	'use strict';
@@ -36,7 +38,8 @@
 		targetCanvas.height = HEIGHT;
 		document.getElementById('canvas-container').appendChild(targetCanvas);

-		uvGenerator = new CylinderUVGenerator();
+		/** Custom UV mapper **/
+		uvGenerator = new THREE.UVsUtils.CylinderUVGenerator();
 		testShape = setupShape(8, 3);
 		holeShape = setupShape(8, 2);
 		testShape.holes.push(holeShape);
@@ -167,77 +170,6 @@
 		}
 	};

-	/** Custom UV mapper **/
-
-	function CylinderUVGenerator() {
-		this.uRepeat = 1;
-		this.targetGeometry = null;
-		this.lengthCache = null;
-	}
-	
-	CylinderUVGenerator.prototype = {
-		generateTopUV: THREE.ExtrudeGeometry.WorldUVGenerator.generateTopUV,
-		generateBottomUV: THREE.ExtrudeGeometry.WorldUVGenerator.generateBottomUV,
-		
-		generateSideWallUV: function( geometry, extrudedShape, wallContour, extrudeOptions,
-		                              indexA, indexB, indexC, indexD, stepIndex, stepsLength,
-		                              contourIndex1, contourIndex2 ) {
-			// first call
-			if (this.targetGeometry !== geometry) {
-				this.prepare(geometry, wallContour);
-			}
-
-			// generate uv
-			var u_list = this.lengthCache;
-			var v1 = stepIndex / stepsLength;
-			var v2 = ( stepIndex + 1 ) / stepsLength;
-			
-			var u1 = u_list[contourIndex1];
-			var u2 = u_list[contourIndex2];
-			if (u1 < u2) {u1 += 1.0;}
-			
-			u1 *= this.uRepeat;
-			u2 *= this.uRepeat;
-			return [
-				new THREE.UV( u1, v1 ),
-				new THREE.UV( u2, v1 ),
-				new THREE.UV( u2, v2 ),
-				new THREE.UV( u1, v2 )
-			];
-		},
-		
-		prepare: function(geometry, wallContour) {
-			var p1, p2;
-			var u_list = [];
-			var lengthSum = 0;
-			var len = wallContour.length;
-			for (var i = 0;i < len;i++) {
-				p1 = wallContour[ i ];
-				p2 = wallContour[ (i+1) % len ];
-
-				var dx = p1.x - p2.x;
-				var dy = p1.y - p2.y;
-				var segmentLength = Math.sqrt(dx*dx + dy*dy);
-				
-				u_list.push(lengthSum);
-				lengthSum += segmentLength;
-			}
-			
-			this.normalizeArray(u_list, lengthSum);
-			this.targetGeometry = geometry;
-			this.lengthCache = u_list;
-		},
-		
-		normalizeArray: function(ls, v) {
-			var len = ls.length;
-			for (var i = 0;i < len;i++) {
-				ls[i] /= v;
-			}
-			
-			return ls;
-		}
-	};
-
 	var TestTextureData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEABAMAAACuXLVVAAAAAXNSR0IArs4c6QAAADBQTFRFB1B5B1iEA16QAGCPAGaWE2WXJHJMJntSLoJVKopbQX+fMJBgLZlnbZuyZaiGgrCY0v66KwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wEEBE0NIvLSa4AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAa7ElEQVR42u1cTWwbR5YuUuIlQAA2qb4YEMCm3JcBDEhyeBlgAdsJLwECsJus41xlEiImN0eCCeQmk2AjvlFssDDJZmcvAXS1SbAxvlHd6ELW1iQXAbzOTrDB+OZx4EC936tuyXIws4ct7M4uQEZ/MfsVu169+t73Xr1+jHNuchffnLt22TUlXl4UyEjOpSelz2sN2+U2XcXtht2UQ7wde5EcyHksA6krz0rczjsGzztV2zWNZiGaz6WI8CV8XCMPMQAv4pLSmlPLbZuV4KHsRmEvnHfkJJSDWFeemY5tuBBscLtpb3EzCvwIA0g1Siw9x2zwKjcd+so3axZmIGQsw/SKQOrKM6iuzHnTdHnN5S1egwJjucA7ePWkDBwokPO6w+0WtFjjcoIBIjnFN2bg+7ryrO6U87Q4Dq9atuHkQ188HR4FgyMx9vcjv920HbvSxDRMxzDdgisPw14UBsdyLAc0UV15LIGR54bLi5gG7IjT/QUR7o+0FAUCMtxyCzCihskd08X76WuSzlJXHksAC4WaylzpistfvHi9mQ6NSWCAZuBBMBr6shP2Ynkw15VnroO7y1VMwzEd03LWnspBqh7YcT+c9GBEJrRoWTCz4p2Cc9gLu7PT3hMxiXHFINaVZxbnVjPP+Y4Le951Csp28SOUx54fBUED1ovBoUIXmoYKSbt0hVR/SV15BgWWOCaBgRo2dCTTpUmXES+X0w5KgSSPhcTQAggyhh0DbwZSV57Z7obFC9jMHIZsWHYoBtHhOBZT+UT60wj7eIcGqNhmo2xiu8veKW1zH58TEJLpyjNOpoMb3M3gMr4yH4IJKRpQHRC2CZwhS+KkYZohrBkDTaSuPG6gvoF/51a95tg1bmfSUGE6lFN3ecE1W7SG/K7pRl4Y+EeYZufp4WjeiXXlmXW3lCsWGhsGLzVgyoWo3Q4fjuL2g6AtZscTr2FW3NyddcsxK2bFMCsTcQrVyXmQfZKuPEHx5Uspc3Eoo1R7Us4i6TUIQmmKmMmu2ufKuAjP8SViXXlWNWjx0gHqNrefSDWASJdJ9siK67jEhY2VXBsqPA0m43F7dv9YPBAHY115ZuRauUaOmxVm7hjrTmksx0960wEcdifqHE27MGBsHnu3srHNgSUlbOF4OFNmBI8vpa48U4TimhbVwij7ERHp0cEOJxRtYib2L6CWLtOVT29AbSNaQ8fOdpCcZV7DzQbgtkVo7/oAUAweYJMfjuXRXFeelXbcvJN3GDOMom0U8+N5ZxQcxQeDeBh1QJy2a0WeA4wX1w3ODF4MRAiI7UVyL8ZAB1JXXmkA27SmLKlE+xi7ZJaqCIDec+o7dOdV3DxN1FD2HQJNOsqKI115dQNw06kp1xSpjACUeDOIYEkC+MrT5bvHay2eA9ETk4UcjbsYP05JqY48s5v3gOSOZTqFOyUTWD4ajg59KcawYsBZt4EBNir1HHytW8BOkr1YpB+RvnTlWYrkXJEF+iu6slFB0+gR1SDaTQ6NmKeyMAU00Rz0U+rKwxeQI3fJn7bIisf0dqwYaywG0nOxsLR85FQwQDX2ppP+02AQe+OxP8YNaMqz0vZWubhmWTnD3rbMit2X+yOxF+0fgz12B1Fv2zTcXNE0ts0dByo0Qo+4HqaXgbmuPONKcUBKMhVoMcAigbtfEhapdrhCcks5VQnOfcnqMU5fV54BqM1sAOjIMYPYI8aK9Qtgo7HHifJyxTa4eZeXInEcDMbSB7kOaBq68sywiU06Vp18BQaII29B9tOfdSJvfLrfsPPwI2ZZbSeLIh81O8B4pKiFrjwjwyHOCFXW6AeAJFQzUIsUScW1HZpejf66JBwHMlh4I18MdOVBSkGYTacKI0WE42yIGPjVh+4yZ3KPxIt8AxN0TMzxNBj1xbHcpwhM4YCmPCKjZs3hDu0l011r5CUcNlTY34e5eqEIrHqxiAGwg5hbqzr2acYkKPYOVGSkJ69IqXPJZ8DhJe2TOCZEV/ze4beV6u4S94atUdwPK+4tuos9DzG4rjxDQLle4WyH4ocmjGj2VCzkfeKrwcgbh55BSAbjoTdL4HxhfDD3ZnIYBYuAYj9deYWEFs9h+RDnYxSfNirWx5Od8WQ8kSCbTs0gTmsSt7DDjPVmrEPqymek9JLWkRWnjO4yiM1I/9VLDTCW'+
 	'D+PJWPZjv68rz+wNp3YXN5hvYqO6OR5Q0NqJZTfynmIQAAnWDpzCIXdTctkjsTiY9ONuPPDJkua68swGQhZv5oHTds4xqnwciTDaj+fdcAgjirpuk6Je4hQGqCXFfuF1fyd15QmKyYrJoZl02VBxCZlu05BIJWKqe2/VLCn1FEsfbCNuj6O2rjyza0Qbqw7lkCiJIIgsDOMB9nAo+lIYfN25adwrFaFrG1hCQW03DD6LheJdQleemVWKbGGkjgPQdvmEcOxQDrGW00BEnpVyCV5qFYrV9UY9C/subUzqyjOyXPfKRltcKdC75PZEq2vNd3k/gL5PUX4Ud8bBRFcefKBSA5927DKvNW4a9mAq/RiEMYAxyYfwdkDR1lrD3P7AVpg3EgNiOvuhfKRIp648s0uV2g7RpuaHICxOvR/LR7Ib7g/DXoi19Ix7a266xHDpu00+IgvDHCnXitdQV56puP0amqgEGuBcJTCECr2U6po0ACYxloMYzhRXdOTkqRzoyjOedwCkZiMHzNwBlohTDypckDPFNWREnDwpb1QxwbxTCikB5tMMyOHiAzTlGd8FSpC3dNPQZv8U7oqgNAx8uR/LCs836muOvZNFH1kSShE+isF15VmK07ZzqcIgvQIoJjLCAcF1oGmduzV80TYPYMVHwaHfGY8PdOWZS2/yUsM2mohe7nLs0o58GLUnp14sJpEog2UQxADoHbPaMEfBOPb68aBPWSZsNV15ZgC9cjwHILFhqZX6w1OsUHchQNkAKZEogeryDXfDpk0OPcdyEgeTdI/TdteVZ8QWSsSsFWuscWXAKW0P6RaVZnOcb9VaLqV9Kcsu9gnOOlEXe0lXHjZg8Fw93zCLPG8Yxj1vEfixryJ4bJIw2ALLKGGAKt+hbEvpVE6iwIu8fhrcCF15ZuXp/kvg7q2yDc9GAUss/LAbgrsexLJEdDPNQbZoMmqC4HyU6hTRYKIrfz1Nx6+n2ymZp4CkZatkbwlu9TbczSkgdNAOsdAHsjd+J03335JnlbpTY4ov0KEK42IKpPBArkPMZF8OKL9bLTTsSqnkVDHRqZzHh0JeOTRdecZs8CVuVHGL8NZAsihG6BzNek/Ekzl2kkVHHtDeJeBOs6AzogMBbGpteZU9yMImohbB2xwaBRgSpNetEuXlNQdoaj+S/ZEcxw+PfTHCKnu68ozSZzCjpl0x63SZOA3mcBUzOOwnUS8UhmM2SiVrgw4byJ58yq6ouCYLvzXlmQrryUoQvFIWg/Zx1JUqjKc0V+tvGVk6zVPpTwJdeXVoBRW6tsqkVDj+WZIRXZJXJWXylsHrxfKOZYbzTtRvx96TuBvKIy/WlWc2MwDVdOrEK0VY8eFIHp52wz3xSI6EiGc5a227lrubY27OqBr3eH/qhYEEr6fpkbPRlGeEECY5bEyAMtuwTGwjxG2xxIaKhbFDh478KiWcWZhQSp7Iia48S9+6pDUuD2C7sVCptJBMRaUXCs3LJEzLJ7bvEeEbULJtqCvPLCLVDggFcLpRa/CH9LaHPXosj2HFwQ62D8WVao7A9AGpLqBTJy89MdGUZ+7l/YNZKiOKKZUrswgqBKtNVbfO1ZkT7fOQ+FYPWCcWk4muPJagRGefnKvowuDBQganFLlTggF6NCm5VnYdBOBFx3byg2C4GLbDtoiVHqWuPCsWii55s3yOks6W642ktxCDBZbx0fTh8axQMStb607VbJnKtU8UlbwMLaXUlVeREVeHeumpBu4qXSRiNuk+Thl16x1vB8jvYQbxga48bmCLl51aEf7CpHSWgBWr5MkozWgTpW8R7XLsYtls5P1wGE46YXc02w9xrdSVxy7IAUhgn0WYsrlDWO4vglnoPQWjOww9s2E27q1XKAen8jA+bWHvKvSTuvKXhKR2mei6dvI6J03CsFXQefMalkdpig0R9rSvK8927Y8osrvNyxTlVgnJgvAKRijy4VtuzeXsQ161imsuvFx45IXD4UKM5F4/1pVnRqHi5pzbzAFU5yuFxrAftQ+kfzQAZ4S7irHH8latQkUYCL24AwubZ4cOVI4ideUzQsILrZRR/KIEg86EKL9gXHpTRwiZESrayDOpK09AxNP6Bu5AU67CMVokBHcIr8ZUIXOXAo8iN8BqKmIYt5+KAVjvuJtuMz155rTW3fUdC+FLuQhYL/pU1xDiCoS5UFSfm9sEcq1qiZDcqNIeVicymRnryjMoiCC65qQqKstrZkw6VMUZ2aEc/U75zISSjZgg1lhTninVqS2kynBMVV8SUYYFHiseCleV6OQbtgPWAU1jesO+bMf9Pfkw9DtSV56BVG/Xq0auaOWLJVYunHpTuTce9o/EI39/sT8tlixuIO60CfIBdrITqvxCj4rmyBdoyjOHvBW37S0iDlZaYJC6iTFFkDJNxtdaWb7XlT06EFGHEYSkUl'+
 	'f+emjmwKXYaaFbShmoFIEyzXTmaZucSmG2ZfcUCEM5prBLyQZdeaYSiVaTwpciSMXGaTDATvL3qcbncDRpO3nDrCh31iyQW1PpF5X9SA1ZV55ZTTgxdbYNK23xWpxVFqgkkko0qveyYh2+C70GEwqq8OZTKFNXnrlNeGqjCaeNyNFQBYlyMiMY9dR9ko+nCiVcY9+pmkbYe4LYfhgGhws4vGGkK88chE5lY8egarNC0Sqcimk08GNvgYsOx2JALtYih4vxaQpZGZgyITp+0pVn6qTpbRkOfwsjqS076p8LCmzrnComSQxQ681g55NYV55R9Mq3VPhMHqMuo0MYiS+P04zzkM6DjEbBsfJ3bOaU2LR3JIaL7pPBfijHQghdeUZ1gFYe2jN2c2WEsDMYyL4fBfdlO/RGY7HDc9XiLs+wzq7J1OGHGdRKXXl2edj0yxSL'+