0

All the examples that I can find use UV mapping on meshes. Are there are examples of UV mapping a sprite? I'm trying to map one fourth of a texture image on a Sprite.

Max Strater
  • 540
  • 6
  • 17
  • this should help: http://stackoverflow.com/questions/18638120/difficulty-in-sprite-texture-alignment – gaitat Apr 09 '15 at 00:03
  • I saw that question, but SpriteMaterial no longer has those properties. From the release revision list: "Moved uvOffset and uvScale to texture.offset and texture.repeat" (R65). I think that's probably what I'm looking for. I'll come back with an answer if I can figure it out. – Max Strater Apr 09 '15 at 00:09

1 Answers1

3

From the Three.js release notes (https://github.com/mrdoob/three.js/releases): "SpriteMaterial: Moved uvOffset and uvScale to texture.offset and texture.repeat" (r65).

Here's an example in r71:

    var mySpriteTexture = THREE.ImageUtils.loadTexture("myTextures.png");
    mySpriteTexture.offset = new THREE.Vector2( 0.25, 0);
    mySpriteTexture.repeat = new THREE.Vector2( 0.25, 1);
    var mySpriteMaterial = new SpriteMaterial({ map: mySpriteTexture });
    var mySprite = new THREE.Sprite(mySpriteMaterial);

This will use the second 1/4th (horizontally) of the "mytextures.png" as the texture. That is, if "mytextures.png" looks like [0][1][2][3], then the sprite will be UV mapped with [1].

Max Strater
  • 540
  • 6
  • 17
  • Doesn't this require a draw per sprite? If so, is there a different approach where the uv's are stored with each vertex? – backspaces Mar 15 '17 at 22:09