Added UVs debug utils

examples/js/UVsUtils.js

@@ -0,0 +1,92 @@
+/* 
+ * @author https://github.com/zz85 | @blurspline
+ *
+ * tool for "unwrapping" and debugging three.js 
+ * geometries UV mapping
+ *
+ * Sample usage:
+ *	document.body.appendChild(
+ *		THREE.UVsDebug(
+ *			new THREE.SphereGeometry(10,10,10,10));
+ *
+ */
+ 
+THREE.UVsDebug = function(geometry) {
+    
+    var verts = geometry.vertices, 
+    faces = geometry.faces, 
+    uvs = geometry.faceVertexUvs[0];
+    console.log('debugging geometry', geometry);
+    
+    
+    var canvas = document.createElement('canvas');
+    var width = 1024;
+    var height = 1024;
+    canvas.width = width;
+    canvas.height = height;
+    
+    var ctx = canvas.getContext('2d');
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(0,0,0,0.8)';
+
+    // paint background white
+    ctx.fillStyle = 'rgba(255,255,255, 1.0)';
+    ctx.fillRect(0, 0, width, height);
+    
+    var abc = 'abcd';
+    
+    var uv, u, ax, ay;
+    var i, il, j, jl;
+    
+    var a = new THREE.Vector2();
+    var b = new THREE.Vector2();
+    
+    for (i = 0, il = uvs.length; i < il; i++) {
+        uv = uvs[i];
+        
+        // draw lines
+        ctx.beginPath();
+        
+        a.set(0, 0);
+        for (j = 0, jl = uv.length; j < jl; j++) {
+            u = uv[j];
+            
+            a.x += u.u;
+            a.y += u.v;
+            
+            if (j == 0) {
+                ctx.moveTo(u.u * width, u.v * height);
+            } else {
+                ctx.lineTo(u.u * width, u.v * height);
+            }
+        }
+        
+        ctx.closePath();
+        ctx.stroke();
+        
+        a.divideScalar(jl);
+        
+        // label the face number
+        ctx.font = "12pt Arial bold";
+        ctx.fillStyle = 'rgba(0,0,0,0.8)';
+        ctx.fillText(i, a.x * width, a.y * height);
+        
+        ctx.font = "8pt Arial bold";
+        ctx.fillStyle = 'rgba(30,30,0,0.8)';
+        
+        
+        // label uv edge orders
+        for (j = 0, jl = uv.length; j < jl; j++) {
+            u = uv[j];
+            b.set(u.u, u.v).subSelf(a).divideScalar(4);
+            
+            b.x = u.u - b.x;
+            b.y = u.v - b.y;
+            ctx.fillText(abc[j]
+                + ':' + faces[i][abc[j]], b.x * width, b.y * height);
+        }
+    
+    }
+    
+    return canvas;
+}