three.js重新计算UV

three.js重新计算UV

在three.js中使用uv贴图的时候需要物体有正确的uv。使用three自带的方法生成的几何体uv通常是理想的。当我们使用svg或者其他数据来生成的几何体uv通常是混乱的，所以需要我们进行调整。
如果是在三维建模软件中，就可以自动展开uv了，但是模型是在three中代码生成的，不方便在软件中修复uv。这个时候我们可以简单的来处理uv，当模式是平面的时候修改起来最理想。如果几何体复杂，就难以处理了。
下面以平面几何体为例，修改一下uv。

这是我的贴图

这是我贴图之后的效果。因为uv关系，效果不理想。

修改uv

打印出geometry看看，uv数组以及faces数组，他们是对应的关系，每个面是三个顶点，每个顶点对应一个uv值。所以我们就可以通过faces数据来重置uv了。其中abc是三个顶点，对应的值可以在顶点数组中找到。
原理分析：就是把点的坐标归一化。

先计算出物体的包围盒，求出长宽的最大值和最小值，然后求出偏移量以及值的范围。
然后就是归一化 。代码如下：

if(!geo.isGeometry) return;
geo.mergeVertices()
geo.computeBoundingBox()
const max = geo.boundingBox.max;
const min = geo.boundingBox.min;
const offset = new THREE.Vector2(0 - min.x,0 - min.y);
const range = new THREE.Vector2(max.x  -  min.x,max.y - min.y);
const faces = geo.faces;
geo.faceVertexUvs [0] = []; 

for(let i = 0; i< faces.length; i ++){
    const v1 = geo.vertices [faces [i] .a],
    v2 = geo.vertices [faces [i] .b],
    v3 = geo.vertices [faces [i] .c]; 
    geo.faceVertexUvs[0].push([
        new THREE.Vector2((v1.x+offset.x)/range.x,(v1.y+offset.y)/range.y),
        new THREE.Vector2((v2.x+offset.x)/range.x,(v2.y+offset.y)/range.y),
        new THREE.Vector2((v3.x+offset.x)/range.x,(v3.y+offset.y)/range.y)
    ])
}
geo.uvsNeedUpdate = true;

这是修改之后的效果，完美，由于我旋转了角度，所以和贴图角度不一致。