我正在尝试在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?
一旦我弄明白这一点,我就可以在这样的纹理上渲染四边形上的字母:
答案 0 :(得分:0)
问题不在于您在上面列出的代码中,而是在着色器中。我认为这个问题应该更加明确。无论如何,如果您删除此代码,它都可以使用(包括Chrome和Firefox)。
if(uv.y != 0.0)
{
textureCoord.w *= (uv.y);
}