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

这些显示完整的spritesheet（排序），正如我所期望的那样没有进一步的设置。

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

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

Answer 1

嗯，spriteMaterial中有一个“uvOffset”和“uvScale”参数，我想你可以使用它们，但我不能向你提供任何源代码。

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

例如topleft是（50 / imageSize，60 / imagesize），右下角是（（50 + 32）/ imgSize，（60 + 32）/ imgSize）。我认为这应该可以工作，虽然我不太确定你是否会得到你想要的结果，因为OpenGL将图像“放在一边”。但你可以尝试从这里开始。希望这可以帮助。

精灵纹理对齐困难

1 个答案: