三个 JS 问题与纹理偏移和重复定位精灵表的元素

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);

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