0

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

I've also tried along the lines of...

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

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

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

Edit: 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.

4

1 回答 1

1

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

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

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

于 2013-09-05T14:45:49.647 回答