Skip to content

Instantly share code, notes, and snippets.

@momo-the-monster
Last active May 5, 2022 14:51
Show Gist options
  • Save momo-the-monster/9471364 to your computer and use it in GitHub Desktop.
Save momo-the-monster/9471364 to your computer and use it in GitHub Desktop.
Three.JS Atlas Loader
// json is a JSON atlas generated by TexturePacker
// imagepath is a url to the full texture atlas image
var atlasTexture = THREE.ImageUtils.loadTexture( imagepath, undefined, function() {
for (var key in json.frames) {
var tex = atlasTexture.clone();
var frame = json.frames[key].frame;
tex.repeat.x = ( frame.w / atlasTexture.image.width );
tex.repeat.y = ( frame.h / atlasTexture.image.height );
tex.offset.x = ( Math.abs( frame.x ) / atlasTexture.image.width );
tex.offset.y = ( Math.abs( frame.y )/ atlasTexture.image.height );
tex.needsUpdate = true;
var material = new THREE.MeshPhongMaterial( { transparent:true, map: tex, side: THREE.DoubleSide} );
scope.materials.push( material );
}
});
@AGulev
Copy link

AGulev commented Jul 13, 2017

Are you make clone of whole image for every frame ? O_o
or it is just copy of texture that used the same image all time?

@MasatoMakino
Copy link

https://threejs.org/docs/#api/textures/Texture
Texture.clone is not a "deep copy", the image is shared.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment