立方體紋理在其中一個立方體表面上反轉

Question

我對立方體紋理使用圖像，圖像在4個表面中的3箇中正確顯示，並且對於第4張表面看起來相反。 我的相關代碼如下：

//dom 
     var container2=document.getElementById('share'); 
     //renderer 
     var renderer2 = new THREE.CanvasRenderer(); 
     renderer2.setSize(100,100); 
     container2.appendChild(renderer2.domElement); 
     //Scene 
     var scene2 = new THREE.Scene(); 
     //Camera 
     var camera2 = new THREE.PerspectiveCamera(50,200/200,1,1000); 
     camera2.up=camera.up; 
     // 
     camera2.position.z = 90; 
     // 
     scene2.add(camera2); 
     //Axes 
     var axes2= new THREE.AxisHelper(); 

     //Add texture for the cube 
     //Use image as texture 
     var img2 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial 
     map:THREE.ImageUtils.loadTexture('img/fb.jpg') 
     }); 
     img2.map.needsUpdate = true; 
     // 
     var cube = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img2); 
     scene2.add(cube); 

圖片大小爲600 * 600像素。任何建議表示讚賞，thanx提前。

Answer 1

首先，應該爲其他人指出您正在嘗試使用JavaScript庫「three.js」進行開發。文檔可以在這裏找到：http://mrdoob.github.com/three.js/docs

問題的癥結在於紋理根據存儲在幾何對象中的UV座標映射到Mesh對象。對象THREE.CubeGeometry的UV座標存儲在數組faceVertexUvs中。

它包含UV的下面陣列在每一個6個面的座標爲4個頂點：

{{0,1}, {0,0}, {1,0}, {1,1}}, // Right Face (Top of texture Points "Up") 
{{0,1}, {0,0}, {1,0}, {1,1}}, // Left Face (Top of texture Points "Up") 
{{0,1}, {0,0}, {1,0}, {1,1}}, // Top Face (Top of texture Points "Backward") 
{{0,1}, {0,0}, {1,0}, {1,1}}, // Bottom Face (Top of texture Points "Forward") 
{{0,1}, {0,0}, {1,0}, {1,1}}, // Front Face (Top of texture Points "Up") 
{{0,1}, {0,0}, {1,0}, {1,1}} // Back Face (Top of texture Points "Up") **Culprit** 

據映射UV座標的每個構成該立方體的面，它們是：

{0, 2, 3, 1}, // Right Face (Counter-Clockwise Order Starting RTF) 
{4, 6, 7, 5}, // Left Face (Counter-Clockwise Order Starting LTB) 
{4, 5, 0, 1}, // Top Face (Counter-Clockwise Order Starting LTB) 
{7, 6, 3, 2}, // Bottom Face (Counter-Clockwise Order Starting LBF) 
{5, 7, 2, 0}, // Front Face (Counter-Clockwise Order Starting LTF) 
{1, 3, 6, 4} // Back Face (Counter-Clockwise Order Starting RTB) 

以上數字是索引到頂點的陣列，這對於THREE.CubeGeometry存儲在vertices，有8其中：

{20, 20, 20},  // Right-Top-Front Vertex 
{20, 20, -20}, // Right-Top-Back Vertex 
{20, -20, 20}, // Right-Bottom-Front Vertex 
{20, -20, -20}, // Right-Bottom-Back Vertex 
{-20, 20, -20}, // Left-Top-Back Vertex 
{-20, 20, 20}, // Left-Top-Front Vertex 
{-20, -20, -20}, // Left-Bottom-Back Vertex 
{-20, -20, 20} // Left-Bottom-Front Vertex 

注：所有的相對方向的上方假設攝影機沿看往中心在原點的立方體正z軸放置。

所以真正的罪魁禍首是紋理的頂點向上的背面。在這種情況下，您希望紋理的頂部在背面朝下指向，所以當多維數據集由於旋轉而翻轉倒轉並查看您擁有它的方式時，圖像會像您期望的那樣顯示。它需要改變如下：

{{1,0}, {1,1}, {0,1}, {0,0}} // FIXED: Back Face (Top of texture Points "Down") 

這種變化可以在代碼中改變座標以獲得顯示器讓你想：

var cubeGeometry = new THREE.CubeGeometry(40, 40, 40); 
cubeGeometry.faceVertexUvs[0][5] = [new THREE.UV(1, 0), new THREE.UV(1, 1), new THREE.UV(0, 1), new THREE.UV(0, 0)]; 
var cube = new THREE.Mesh(cubeGeometry, img2); 

對於進一步的閱讀，我推薦以下鏈接使用UV座標的紋理貼圖http://www.rozengain.com/blog/2007/08/26/uv-coordinate-basics/。