立方体纹理在其中一个立方体表面上反转

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/。