正确的UV映射Three.js

Question

我正在尝试正确映射UV纹理，但是失败了......

我的应用程序中有下一个结果：

结果不是我在等待。我希望有下一个描述的视图：

源代码在这里：

http://pastebin.com/aDg981Bk

Answer 1

您需要查看PlaneGeometry.js并了解如何设置UV。然后你就可以弄清楚如何重置它们。这应该有用 - 每个“面”有两个三角形。

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