three.js - ThreeJS スプライト R71 で UV マッピングを行う方法

Question

私が見つけることができるすべての例は、メッシュで UV マッピングを使用しています。スプライトを UV マッピングする例はありますか? テクスチャ イメージの 4 分の 1 をスプライトにマッピングしようとしています。

Answer 1

Three.js リリース ノート ( https://github.com/mrdoob/three.js/releases ) から: 「SpriteMaterial: uvOffset と uvScale を texture.offset と texture.repeat に移動」 (r65)。

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

これにより、「mytextures.png」の 2 番目の 1/4 (水平方向) がテクスチャとして使用されます。つまり、「mytextures.png」が [0][1][2][3] の場合、スプライトは [1] で UV マッピングされます。