一個幾何形狀的不同面

我很新的使用多重紋理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

來源

2014-04-09 Angel

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

完成！謝謝您的幫助 ;） – Angel

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

您有幾種選擇：

你可以改變你的平面幾何的每個三角形的烏布蘇爲(0,0)，(0,1)，(1,0)，或(1,1)適當。
您可以根據每個紋理設置texture.offset和texture.repeat屬性。例如，texture.offset.set(0, 1/3)和texture.repeat.set(3, 3)。
最後一個簡單的選項是隻有9個平面幾何形狀，每個都有2個三角形面。

three.js所r.66

來源

2014-04-09 16:08:04 WestLangley

一個幾何形狀的不同面

回答

相關問題