正确的 UV 映射 Three.js [英] Correct UV mapping Three.js

问题描述

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

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:

源代码在这里:

http://pastebin.com/aDg981Bk

推荐答案

您需要查看 PlaneGeometry.js 并了解如何设置 UV.然后您将能够弄清楚如何重置它们.这应该可行——每个面"有两个三角形.

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

three.js r.62

这篇关于正确的 UV 映射 Three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！