1

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

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

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

四边形上的 uv 映射

所以上面的图像被渲染到一个四边形上，下面的代码来自一个循环：

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

在此处输入图像描述

然后我想将四边形的顶部两个角向下移动 2 到 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 处的正方形？

一旦我弄清楚了这一点，我就可以从这样的纹理在四边形上渲染一个字母：

在此处输入图像描述

4

1 回答 1

0

问题不在您上面列出的代码中，而是在着色器中。我认为这个问题应该更清楚。无论如何，如果您删除此代码，它就可以工作（在 Chrome 和 Firefox 中）。

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

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

于 2014-10-13T14:03:19.080 回答