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

I've got the next result in my app:

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

The source code is here:

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

I've got the next result in my app:

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

The source code is here:

http://pastebin./aDg981Bk

• javascript
• three.js
• texture-mapping
• uv-mapping

• 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 Commented Nov 10, 2013 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. – user2402179 Commented Nov 10, 2013 at 17:10
• 1 The people who answer webGL questions prefer that the webgl tag only be used for webgl programming questions. – WestLangley Commented Nov 10, 2013 at 17:56

1 Answer 1

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.puteFaceNormals(); // not needed
//geometry.dynamic = true; // not needed
//geometry.uvsNeedUpdate = true; // not needed since plane has not been rendered yet    

three.js r.62