0

I'm trying apply a simple texture mapping to a cube, but when the texture is applied it's rotated 90° CCW.

Just for my tests I'm using the same uv mapping for all faces:

window.head = function(){
    var txSplitX = 1/64;
    var txSplitY = 1/32;
    var mesh;
    var cube = new THREE.CubeGeometry( 100, 100, 100);
    var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('assets/charSkin/Superman.png') } );
    var faceTx= [
            new THREE.Vector2(0.125,0.75),
            new THREE.Vector2(0.25,0.75),
            new THREE.Vector2(0.25,0.5),
            new THREE.Vector2(0.125,0.5)   
        ];

    var j=0, k=1;
    for(var i=0; i<6;i++){
        cube.faceVertexUvs[0][j] = [faceTx[0],faceTx[1],faceTx[3]];
    cube.faceVertexUvs[0][k] = [faceTx[1],faceTx[2],faceTx[3]];
        j+=2;
        k+=2;
    }

this.mesh = new THREE.Mesh(cube,  material);  
}

The result I have : http://securilabs.free.fr/images/result.png

My texture : http://securilabs.free.fr/images/Superman.png

How can I get the correct orientation of the texture on each face ?

Guillaume
  • 59
  • 6
  • 1. Include `UVsUtils.js` in your project. 2. Create a UV map like so: `var geo = new THREE.PlaneGeometry( 10, 10 ); document.body.appendChild( THREE.UVsDebug( geo, 512 ) );` 3. Apply your UV changes and compare. – WestLangley Mar 09 '14 at 00:20
  • The problem is that UVsUtils.js doesn't work for CubeGeometry. All faces are stacked, and since it seems that each face got it's own vertex coordinate I can't use a PlaneGeometry as a reference. – Guillaume Mar 09 '14 at 12:46
  • Make sure you can do what you want succcessfully with a `PlaneGeometry` first. Then move on to `BoxGeometry`, which has replaced `CubeGeometry`. – WestLangley Mar 09 '14 at 17:23

0 Answers0