Correct UV mapping Three.js

Question

I'm trying to map the UV-texture correctly, but failing...

I've got the next result in my app:

enter image description here

The result isn't that I was awaiting. I want to have the next described view:

enter image description here

The source code is here:

http://pastebin.com/aDg981Bk

You can achieve that without using multiple materials and without changing the UVs, and instead setting the texture wrapping parameters. Is changing the UVs something you want to do? (Also, this is not a webgl question, so the tag was removed.) — WestLangley, Nov 10 '13 at 17:06
@WestLangley it's a webgl question too. Is Three.js based now on DirectX? No. So webgl has direct connection to this question too, just because three.js based on it. Also what do you know what I'm trying to achieve? It's just a simple app, that I'm trying to learn, really I want to make UV-texture with different images, downloaded via AJAX from localhost, that will make my plane look like a map matrix with different images, is there other ways? I can only imagine, that I can make 10 planes, draw on each plane its own texture and place them near each other, but I suppose it's a very bad way. — , Nov 10 '13 at 17:10
The people who answer webGL questions prefer that the webgl tag only be used for webgl programming questions. — WestLangley, Nov 10 '13 at 17:56

score 5 · Accepted Answer · answered Nov 10 '13 at 17:47

You need to look at PlaneGeometry.js and understand how the UVs are set. Then you will be able to figure out how to reset them. This should work -- there are two triangles per "face".

for(var i = 0; i < geometry.faces.length / 2; i++) {

    geometry.faceVertexUvs[ 0 ].push(
    [
        new THREE.Vector2( 0, 0 ),
        new THREE.Vector2( 0, 1 ),
        new THREE.Vector2( 1, 0 ),    
    ] );

    geometry.faces[ 2 * i ].materialIndex = i;

    geometry.faceVertexUvs[ 0 ].push(
    [
        new THREE.Vector2( 0, 1 ),
        new THREE.Vector2( 1, 1 ),
        new THREE.Vector2( 1, 0 ),    
    ] );

    geometry.faces[ 2 * i + 1 ].materialIndex = i;

    materials.push( createTexture( i ) );

}    

//geometry.computeFaceNormals(); // not needed
//geometry.dynamic = true; // not needed
//geometry.uvsNeedUpdate = true; // not needed since plane has not been rendered yet

three.js r.62

Correct UV mapping Three.js

1 Answers1

Linked