2014-04-09 111 views
0

我很新的使用多重紋理three.js所,所以我不知道是否有可能做到這一點:一個幾何形狀的不同面

我想在平面幾何中顯示多個圖像(一些他們會出現多次)。試想下簡化的情況:

+---+---+---+ 
| 1 | 2 | 3 | 
+---+---+---+ 
| 4 | 1 | 6 | 
+---+---+---+ 
| 1 | 1 | 9 | 
+---+---+---+ 

我創建的平面與它的劃分和應用MeshBasicMaterial(包含在裏面MeshFaceMaterial)於其表面。每對的面的已分配可用的圖像中的一個,即:

  • image1的被施加到面{0,1},{8,9},{12,13},{14,15}
  • IMAGE2被施加到面{2,3}
  • ...

的圖像是「正確」出現在正確的位置,但它們的尺寸是不正確的。每個瓷磚正方形都是256x256像素大小,每個要顯示的圖像也是256x256。我的問題是紋理大小被拉伸到幾何體的邊緣。

我試着玩紋理wrapS/wrapT屬性沒有運氣,因爲它總是延伸到768x768(在這個例子中)。

我當前的代碼:

// TEXTURE LOADING LOOP 
// canvas contains a 256x256 image 
var texture = new THREE.Texture(canvas); 
//My last test was trying to clamp to the edge of the face -> failed 
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; 
texture.needsUpdate = true; 
this.materials.push(
    new THREE.MeshBasicMaterial({ 
     map: texture 
    }) 
); 

// LATER, we generate the geometry to display the images 
var geometry = new THREE.PlaneGeometry(256*3, 256*3, 3, 3); 
// assign a material to each face (each face is 2 triangles) 
var l = geometry.faces.length; 
for(var i = 0; i < l; i+=2) { 
    // assigned_material contains the index of the material texture to display 
    // on each "square" 
    geometry.faces[ i ].materialIndex = assigned_material[i]; 
    geometry.faces[ i+1 ].materialIndex = assigned_material[i]; 
} 
// mesh 
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(this.materials)); 
this.scene.add(mesh); 

是否有可能分配相同的材料質地不同的面孔,並保持其目前的規模,所以每一分上顯示其目前的規模紋理?

爲了更清楚地解決這個問題,在這個結果圖像上,我們可以看到相同的紋理應用於中心,左下角和右下角的貼圖,並且每個貼圖都應該顯示完整版本的256x256像素圖像。 http://angelraposo.appspot.com/images/result.jpg

+0

完美!修復它。 我使用了UV選項,因爲我之前沒有使用它,這是學習如何使用它們的好方法;) – Angel

+0

完成!謝謝您的幫助 ;) – Angel

回答

0

您的平面幾何圖形的尺寸是不相關的 - 只有縱橫比很重要,所以圖像沒有拉伸。

您有幾種選擇:

  1. 你可以改變你的平面幾何的每個三角形的烏布蘇爲(0,0)(0,1)(1,0),或(1,1)適當。

  2. 您可以根據每個紋理設置texture.offsettexture.repeat屬性。例如,texture.offset.set(0, 1/3)texture.repeat.set(3, 3)

  3. 最後一個簡單的選項是隻有9個平面幾何形狀,每個都有2個三角形面。

three.js所r.66