精灵纹理对齐的困难

Question

我有一些类似于以下的代码...

this.texture = new THREE.ImageUtils.loadTexture( 'spritesheet.png' );
this.material = new THREE.MeshBasicMaterial( { map: this.texture, side:THREE.DoubleSide } );
this.geometry = new THREE.PlaneGeometry(32, 32, 1, 1);
this.sprite = new THREE.Mesh( this.geometry, this.material );
game.scene.add( this.sprite );

我也尝试过...

    this.material = new THREE.SpriteMaterial( { 
    map: image, 
    useScreenCoordinates: true, 
    alignment: THREE.SpriteAlignment.center 
} );
    this.sprite = new THREE.Sprite( this.material );

这些显示完整的精灵表（有点），正如我所期望的那样，没有进一步的设置。

如何对齐精灵，使其仅显示 32x32px，例如从偏移 50,60 开始？ three.js 文档似乎没有太多信息，而且我看到的示例倾向于每个精灵使用一个图像（这可能更可取，或者唯一可能的方式？）

编辑：我发现了一个材质 uvOffset 和 uvScale，如果有人知道它们是如何工作的，我怀疑它们与 Sprite 对象中的对齐有关。将进一步挖掘。

Answer 1

好吧，在 spriteMaterial 中有一个 "uvOffset" 和 "uvScale" 参数，我认为你可以使用它们，但我无法向你提供任何源代码。

您当然可以使用 PlaneGeometry 并计算 2 个三角形（平面）的 UV 坐标。例如，左上角是您的偏移量，右下角是根据给定的偏移量和大小 (32x32) 计算的，但使用整个图像大小（以像素为单位）来获取介于 0 和 1 之间的 UV 坐标

例如左上角是 (50/imageSize, 60/imagesize)，右下角是 ((50+32)/imgSize, (60+32)/imgSize)。我认为这应该可行，虽然我不太确定你是否会得到你想要的结果，因为 OpenGL 将图像“上下颠倒”。但是你可以尝试从这里继续。希望这可以帮助。