THREE.js 中的 UV 映射 [英] UV mapping in THREE.js

问题描述

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

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

JSFiddle:

I'm trying to use SDF fonts in THREE.js, they come with a PNG map of characters and some character data such as each letters x offset, y offset, width, height and so on.

Before I start using the character data with the offsets and widths and things for each character, I just wanted to simply try out mapping only a part of one of the example UV textures from the three.js/examples.

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

So the image above is being rendered onto a quad, with the following code from inside a loop:

        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

        ];

Now to display part of the texture on the quad, I assume I need to adjust the UV coordinates. Problem is, some of them do what I expect, and some of them don't. For example, to move the texture across by three, so it displays from 0.3 to 1 works as expected:

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

Then I want to move the top two corners of the quad down by two to 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
        ];

But this doesn't work, it seems to have actually affected the U/X coordinate and shifted the top half of the texture to the left. The faceVertexUvs don't seem to exhibit the same properties as X,Y coordinates would, can anyone explain what I'm missing here? And how to display a single square such as the one at 0.7, 0.7?

Once I've figured this out, I'll be able to render a letter on a quad from a texture like this:

解决方案

The problem was not in the code you have listed above but in the shaders. The question should be more clear I think. Anyway if you remove this code it works (both in Chrome and Firefox).

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

Fiddle at: http://jsfiddle.net/47j8g71a/

这篇关于THREE.js 中的 UV 映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！