three.js - JSON Atlas Loader

threejs-json-atlas-loader.js

// three.js JSON Atlas Loader
// Requires: whatwg-fetch (https://github.com/github/fetch)

var materials = {}

fetch('images/spritesheet.json').then(function(response) {
  return response.json() 

}).then(function(json) {
  var atlasTexture = THREE.ImageUtils.loadTexture('images/' + json.meta.image, undefined, function() {
    for (var key in json.frames) {
      var texture = atlasTexture.clone();
      var frame = json.frames[key].frame;

      texture.repeat.x = ( frame.w / atlasTexture.image.width );
      texture.repeat.y = ( frame.h / atlasTexture.image.height );
      texture.offset.x = ( Math.abs( frame.x ) / atlasTexture.image.width );
      texture.offset.y = ( Math.abs( frame.y )/ atlasTexture.image.height );
      texture.needsUpdate = true;

      var material = new THREE.MeshPhongMaterial({
        transparent:true,
        map: texture,
        side: THREE.DoubleSide
      });

      materials[ key.replace(".png", "") ] = material
    }
  });
})