THREE.js中的UV貼圖

我試圖在THREE.js中使用SDF字體，它們帶有一個PNG字符圖和一些字符數據，例如每個字母x偏移量，y偏移量，寬度，高度等等。THREE.js中的UV貼圖

在我開始使用每個字符的偏移量和寬度以及東西的字符數據之前，我只想簡單地只測試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

來源

2014-10-11 dps27a

小提琴將是有益的。 – gaitat 2014-10-12 14:17:19

將外部圖像加載爲紋理時遇到問題 – dps27a 2014-10-12 15:55:42

我正在處理這個問題。看看我的小提琴到目前爲止：http://jsfiddle.net/v0grL1ay/ – gaitat 2014-10-12 16:04:01

的問題是不是在你的代碼上面列出但在着色器中。我想這個問題應該更清楚。無論如何，如果你刪除了這個代碼，它可以在Chrome和Firefox中使用。

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

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

來源

2014-10-13 14:03:19 gaitat

「任何人都可以解釋我在這裏失蹤了什麼？」 – dps27a 2014-10-13 14:05:43

你想用這段代碼完成什麼？ – gaitat 2014-10-13 14:08:40

「我試圖在THREE.js中使用SDF字體，它們帶有一個PNG字符圖和一些字符數據，例如每個字母x偏移量，y偏移量，寬度，高度等等。」 – dps27a 2014-10-13 14:09:36

THREE.js中的UV貼圖

回答

相關問題