Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple function that abstracts sprite mapping in Three.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment