THREE.js中的UV映射

时间:2014-10-11 17:40:53

标签: three.js uv-mapping

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

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

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

uv mapping on quad

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

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

enter image description here

然后我想将四边形的前两个角向下移动两到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
        ];

enter image description here

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

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

enter image description here

1 个答案:

答案 0 :(得分:0)

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

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

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