three.js/examples/js/UVsUtils.js

/*
 * @author gyuque / http://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 / http://github.com/zz85
 * @author WestLangley / http://github.com/WestLangley
 *
 * 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, size ) {

    // handles wrapping of uv.x > 1 only
    
    var abc = 'abcd';

    var uv, u, ax, ay;
    var i, il, j, jl;
    var vnum;

    var a = new THREE.Vector2();
    var b = new THREE.Vector2();

    var faces = geometry.faces;
    var uvs = geometry.faceVertexUvs[ 0 ];

    var canvas = document.createElement( 'canvas' );
    var width = size || 1024;   // power of 2 required for wrapping
    var height = size || 1024;
    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext( '2d' );
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'rgba( 0, 0, 0, 1.0 )';
    ctx.textAlign = 'center';

    // paint background white

    ctx.fillStyle = 'rgba( 255, 255, 255, 1.0 )';
    ctx.fillRect( 0, 0, width, height );

    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, ( 1 - u.y ) * height );

            } else {

                ctx.lineTo( u.x * width, ( 1 - 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, 1.0 )';
        ctx.fillText( i, a.x * width, ( 1 - a.y ) * height );

        if ( a.x > 0.95 ) { // wrap x // 0.95 is arbitrary

            ctx.fillText( i, ( a.x % 1 ) * width, ( 1 - a.y ) * height );

        }

        ctx.font = "8pt Arial bold";
        ctx.fillStyle = 'rgba( 0, 0, 0, 1.0 )';

        // label uv edge orders

        for ( j = 0, jl = uv.length; j < jl; j++ ) {

            u = uv[ j ];
            b.addVectors( a, u ).divideScalar( 2 );

            vnum = faces[ i ][ abc[ j ] ];
            ctx.fillText( abc[ j ] + vnum, b.x * width, ( 1 - b.y ) * height );

            if ( b.x > 0.95 ) {  // wrap x

                ctx.fillText( abc[ j ] + vnum, ( b.x % 1 ) * width, ( 1 - b.y ) * height );

            }

        }

    }

    return canvas;

}