Simple function that abstracts sprite mapping in Three.js

spriteMapper.js

/**
 * @param paramaters as object
 *  
 *  Prepare the object in 
 *  the following format:
 *  
 *  material = spriteMapper({
 *    image: 'sprite.png',
 *    imageSize: 256, // size of image in px (must be square)
 *    spriteSize: 16, // size of sprite in px (must be square)
 *    sides:{
 *      left:{
 *        spriteX: 8, // number of sprites from the left
 *        spriteY: 0  // number of sprites from the top
 *      },
 *      right:{
 *        spriteX: 8,
 *        spriteY: 0
 *      },
 *      top:{
 *        spriteX: 9,
 *        spriteY: 0
 *      },
 *      bottom:{
 *        spriteX: 10,
 *        spriteY: 0
 *      },
 *      front:{
 *        spriteX: 8,
 *        spriteY: 0
 *      },
 *      back:{
 *        spriteX: 8,
 *        spriteY: 0
 *      }
 *    }
 *  });
 * 
 */

function spriteMapper(paramaters) {
  materials = new Array();
  for (side in paramaters.sides) {
    texture           = THREE.ImageUtils.loadTexture(paramaters.image);

    // change these as required
    texture.wrapS     = THREE.ClampToEdgeWrapping;
    texture.wrapT     = THREE.ClampToEdgeWrapping;
    texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.LinearMipMapLinearFilter;
    
    texture.repeat.x  = paramaters.spriteSize /  paramaters.imageSize;
    texture.repeat.y  = paramaters.spriteSize /  paramaters.imageSize;
    texture.offset.x  = paramaters.sides[side].spriteX / ( paramaters.imageSize / paramaters.spriteSize );
    texture.offset.y  = paramaters.sides[side].spriteY / ( paramaters.imageSize / paramaters.spriteSize );
    
    // change material type as required
    materials.push(new THREE.MeshLambertMaterial( {map:texture, transparent: true} ));
  }
  return materials;
}