三个JS问题与纹理偏移和重复定位spritesheet元素

Question

我有一个精灵表（使用Texture Packer导出），并使用offset和repeat属性（纹理）来显示我的精灵表单元素。

这目前无法正常工作（并裁剪出错误的纹理元素） - 如果有人对我的错误有所了解，我会很高兴。

这是我的代码：

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;

谢谢。

Answer 1

解决了它。为了将来的参考，我最终得到了一张精灵表，使用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);

希望这会希望其他人在那里。