正确的 UV 映射 Three.js答案

【问题标题】：Correct UV mapping Three.js正确的 UV 映射 Three.js
【发布时间】：2013-11-22 09:04:54
【问题描述】：

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

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

结果不是我在等待。我想要下一个描述的视图：

源代码在这里：

http://pastebin.com/aDg981Bk

【问题讨论】：

您可以在不使用多种材质且不更改 UV 的情况下实现此目的，而是设置纹理包裹参数。更改 UV 是您想要做的事情吗？（另外，这不是一个 webgl 问题，所以标签被删除了。）
@WestLangley 这也是一个 webgl 问题。 Three.js 现在是基于 DirectX 的吗？不，所以 webgl 也与这个问题有直接联系，只是因为 three.js 基于它。另外，您知道我要达到的目标吗？这只是一个简单的应用程序，我正在努力学习，真的我想用不同的图像制作 UV 纹理，通过 AJAX 从本地主机下载，这将使我的飞机看起来像一个带有不同图像的地图矩阵，还有其他方法吗?我只能想象，我可以制作 10 个平面，在每个平面上绘制自己的纹理并将它们彼此靠近，但我认为这是一种非常糟糕的方式。
回答 webGL 问题的人更喜欢 webgl 标签只用于 webgl 编程问题。

标签： javascript three.js texture-mapping uv-mapping

【解决方案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

【讨论】：