CODEWITHSUNDEEP
three.js
user2386872
user2386872

Reputation: 345

Three JS issue with texture offset and repeat for positioning elements of a spritesheet

I have a sprite sheet (exported with Texture Packer), and am using the offset and repeat properties (of a texture) to show elements of my sprite sheet.

This is currently not working ( and cropping out wrong elements of my texture ) - would love it if anyone has some insight about where I am going wrong.

Here is my code:

var tx = this._loadedTexture.clone(); // THREE.Texture
var txData = this._atlas.frames[name];
var txFrame = txData.frame;//txFrame = Object {x: 122, y: 0, w: 68, h: 64}
var img = tx.image; // HTMLImageElement - image.width = 256 image.height = 512

tx.repeat.x = txFrame.w / img.width;
tx.repeat.y = txFrame.h / img.height;

tx.offset.x = ( txFrame.x  / img.width );
tx.offset.y = ( txFrame.y / img.height );
tx.needsUpdate = true;

Thank you .

Upvotes: 0

Views: 1697

Answers (1)

user2386872
user2386872

Reputation: 345

Solved it. For future reference, this is what I ended up with to get a sprite sheet working with a texture atlas in ThreeJS (0.73):

tx.wrapS = tx.wrapT = THREE.RepeatWrapping;
tx.repeat.set( txFrame.w / img.width, txFrame.h / img.height );
tx.offset.x = ( ( txFrame.x ) / img.width );
tx.offset.y = 1 - ( txFrame.h / img.height ) - ( txFrame.y / img.height);

Hopefully this will hope someone else out there.

Upvotes: 5

Related Questions