threejs精灵模型_threejs模型UV算法，超级好用

最新推荐文章于 2024-08-12 17:48:51 发布

Dr.Pride

最新推荐文章于 2024-08-12 17:48:51 发布

阅读量1.1k

点赞数

文章标签： threejs精灵模型

本文链接：https://blog.csdn.net/weixin_30384285/article/details/113006481

版权

这篇博客介绍了如何在ThreeJS中利用法线信息为模型生成UV坐标，以解决垂直表面纹理拉伸的问题。提供了一个名为`assignUVs`的函数，它遍历几何体面并根据法线确定UV坐标，适用于具有平坦表面的形状。虽然仍不完美，但能有效工作。此外，建议根据物体实际尺寸调整纹理的重复和缩放，以适应不同大小的模型。

摘要由CSDN通过智能技术生成

https://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate

使用模型表面法线来决定使用(xyz)中的哪两个，对应到UV坐标当中。用起来相当不错。当然如果能在设计模型的时候进行展UV就更好了。

The other answers here were a great help but didn't quite fit my requirements to apply a repeating pattern texture to all sides of a shape with mostly flat surfaces. The problem is that using only the x and y components as u and v results in weird stretched textures on vertical surfaces.

My solution below uses surface normals to pick which two components (x, y and z) to map to u and v. It's still pretty crude but it works quite well.

functionassignUVs(geometry) {

geometry.faceVertexUvs[0] =[];

geometry.faces.forEach(function(face) {var components = ['x', 'y', 'z'].sort(function(a, b) {return Math.abs(face.normal[a]) >Math.abs(face.normal[b]);

});var v1 =geometry.vertices[face.a];var v2 &#