精灵纹理对齐困难 [英] Difficulty in sprite texture alignment

问题描述

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

I have some code similar to the following...

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(有点)，正如我所期望的那样，无需进一步设置.

These display the full spritesheet (sort of), as I would expect without further settings.

我如何对齐精灵，使其仅显示 32x32px，例如从偏移 50,60 开始?Three.js 文档似乎没有太多信息，我看到的示例倾向于每个精灵使用一个图像(这可能更可取，还是唯一可能的方法?)

How do I align the sprite so it only displays say 32x32px starting at offset 50,60 for example ? The three.js documentation doesn't seem have much information, and the examples I've seen tend to use one image per sprite (which may be preferable, or only way possible ?)

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

I've spotted a material uvOffset and uvScale that I suspect is related to alignment in a Sprite object if anyone knows how these work. Will dig further.

推荐答案

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

Well, there is a "uvOffset" and "uvScale" parameter in spriteMaterial , i think you could use those but I cannot present any source code to you.

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

What you can of course do is using PlaneGeometry and calculate UV Coordinates for the 2 triangles (the plane). For example top-left is your offset and bottom right is calculated from a given offset and size (32x32) but using the whole image size in pixels to get the UV coordinates between 0 and 1

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

for example topleft is (50/imageSize, 60/imagesize) and bottom right is ( (50+32)/imgSize, (60+32)/imgSize). I think this should work, although i am not quite sure if you would get the result you want as OpenGL treats images "up side down". But you can try and go on from here. Hope this helps.

这篇关于精灵纹理对齐困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！