CODEWITHSUNDEEP
javascripthtmlthree.js
Malloc
Malloc

Reputation: 16276

cube texture is reversed in one of the cube faces

I use an image for the cube texture, the image is shown correctly in 3 of 4 faces, and looks reversed for the 4th face. My relevant code is the following:

//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);

The image size is 600*600 px. Any suggestion is appreciated, thanx in advance.

Upvotes: 1

Views: 1007

Answers (1)

AffluentOwl
AffluentOwl

Reputation: 3647

First off, it should be pointed out for others that you are trying to develop using the javascript library "three.js". The documentation can be found here: http://mrdoob.github.com/three.js/docs

The crux of the issue is that textures get mapped to Mesh objects based upon UV coordinates stored in the Geometry objects. The THREE.CubeGeometry object has its UV coordinates stored in the array faceVertexUvs.

It contains the following arrays of UV coordinate for the 4 vertices in each of the 6 faces:

{{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**

It is mapping UV coordinate to each of the faces which make up the cube, which are:

{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)

The above numbers are indexes into the array of vertices, which for the THREE.CubeGeometry are stored in vertices, there are 8 of them:

{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

NOTE: All relative directions above are assuming the camera is placed along the positive z axis looking towards a cube centered on the origin.

So the real culprit is the back face which has the texture's top point upwards. In this case you want the texture's top to point downwards on the back face, so when the cube if flipped upside down due to the rotations and viewed the way you have it, the image appears as you expect. It needs to change as follows:

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

This change can be made in the code to change the coordinates to get the display you would like:

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);

For further reading, I recommend the following link on Texture Mapping with UV coordinates http://www.rozengain.com/blog/2007/08/26/uv-coordinate-basics/.

Upvotes: 4

Related Questions