큐브면 중 하나에서 큐브 텍스처가 반전 됨

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 : 내 관련 코드는 다음과 같다. 모든 제안은 고맙습니다. 고맙습니다.

Answer 1

먼저 "javascript 라이브러리"three.js "를 사용하여 개발하려는 다른 사람들을 위해 지적해야합니다. 문서는 여기에서 찾을 수 있습니다 : http://mrdoob.github.com/three.js/docs

Geometry 개체에 저장된 UV 좌표를 기반으로 텍스처가 메쉬 개체에 매핑된다는 것이 핵심입니다. 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 개있다 :

0,123,038,872,469,

참고 : 위의 모든 관련 지시 사항은 카메라가 원점을 중심으로 한 정육면체를 향한 양의 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/.