three.js - 如何在 ThreeJS 精灵 R71 上进行 UV 映射

Question

我能找到的所有示例都在网格上使用 UV 映射。是否有 UV 映射精灵的示例？我正在尝试将四分之一的纹理图像映射到 Sprite 上。

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”的第二个 1/4（水平）作为纹理。也就是说，如果“mytextures.png”看起来像 [0][1][2][3]，那么 sprite 将使用 [1] 进行 UV 映射。