THREE.js中的UV映射

Question

我正在尝试在THREE.js中使用SDF字体，它们带有PNG的字符映射和一些字符数据，例如每个字母x偏移，y偏移，宽度，高度等。

在我开始使用具有每个字符的偏移和宽度以及事物的字符数据之前，我只想简单地尝试仅映射来自three.js / examples的示例UV纹理的一部分。

JSFiddle：http://jsfiddle.net/b2zegeht/3/

因此，上面的图像被渲染到四边形上，并在循环中使用以下代码：

        var i=0;

        geo.vertices.push(new THREE.Vector3(x-halfWidth, y+halfWidth, 0));      // TL
        geo.vertices.push(new THREE.Vector3(x-halfWidth, y-halfWidth, 0));      // BL
        geo.vertices.push(new THREE.Vector3(x+halfWidth, y-halfWidth, 0));      // BR
        geo.vertices.push(new THREE.Vector3(x+halfWidth, y+halfWidth, 0));      // TR

        // create two triangle faces for geom
        // all face coordinates must match vertice indexes
        // 0,1,2,3 start in the top left and go round the quad anti-clockwise
        var j = i*4;
        geo.faces.push(new THREE.Face3(
            j,                              // TL
            j+1,                            // BL
            j+3                             // TR
        ));
        geo.faces.push(new THREE.Face3(
            j+1,                            // BL
            j+2,                            // BR
            j+3                             // TR
        ));

        var k = i*2;

        // x, y+height
        // x, y
        // x+width, y+height    
        geo.faceVertexUvs[0][k] = [

            new THREE.Vector2(  0,  1  ),    // TL
            new THREE.Vector2(  0,  0  ),    // BL
            new THREE.Vector2(  1,  1  )     // TR

        ];

        // x, y
        // x+width, y
        // x+width, y+height
        geo.faceVertexUvs[0][k+1] = [

            new THREE.Vector2(  0,  0  ),    // BL
            new THREE.Vector2(  1,  0  ),    // BR
            new THREE.Vector2(  1,  1  )     // TR

        ];

现在要在四边形上显示部分纹理，我假设我需要调整UV坐标。问题是，其中一些做了我期望的事情，而其中一些做不到。例如，要将纹理移动三个，因此它显示从0.3到1按预期工作：

        geo.faceVertexUvs[0][k] = [
            new THREE.Vector2(  0.3, 1  ),      // TL
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   1  )       // TR
        ];
        geo.faceVertexUvs[0][k+1] = [
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   0  ),      // BR
            new THREE.Vector2(  1,   1  )       // TR
        ];

然后我想将四边形的前两个角向下移动两到0.8，

        geo.faceVertexUvs[0][k] = [
            new THREE.Vector2(  0.3, 0.8  ),    // TL
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   0.8  )     // TR
        ];
        geo.faceVertexUvs[0][k+1] = [
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   0  ),      // BR
            new THREE.Vector2(  1,   0.8  )     // TR
        ];

但是这不起作用，它似乎实际上影响了U / X坐标并将纹理的上半部分向左移动。 faceVertexUvs似乎没有表现出与X，Y坐标相同的属性，任何人都可以解释我在这里缺少的东西吗？以及如何显示单个正方形，如0.7,0.7？

一旦我弄明白这一点，我就可以在这样的纹理上渲染四边形上的字母：

Answer 1

问题不在于您在上面列出的代码中，而是在着色器中。我认为这个问题应该更加明确。无论如何，如果您删除此代码，它都可以使用（包括Chrome和Firefox）。

if(uv.y != 0.0)
{
    textureCoord.w *= (uv.y);
}

小提琴：http://jsfiddle.net/47j8g71a/