three.js/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.Vector2( u1, v1 ),
            new THREE.Vector2( u2, v1 ),
            new THREE.Vector2( u2, v2 ),
            new THREE.Vector2( 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 zz85 / https://github.com/zz85
 *
 * 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.x;
            a.y += u.y;
            
            if (j == 0) {
                ctx.moveTo(u.x * width, u.y * height);
            } else {
                ctx.lineTo(u.x * width, u.y * 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.x, u.y).subSelf(a).divideScalar(4);
            
            b.x = u.x - b.x;
            b.y = u.y - b.y;
            ctx.fillText(abc[j]
                + ':' + faces[i][abc[j]], b.x * width, b.y * height);
        }
    
    }
    
    return canvas;
}