threejs - uv 映射 简要

 啥也不说先上way+code+demo;

https://github.com/Thinkia/threejs_/blob/master/test/test2-%20uv/readme.md

如何理解uv映射?

Uv映射的作用就是将三维的问题放到二维来处理: 三维 – 二维uv平面--映射到三维空间

比如： 立方体;

将六个面展开成一张平面图;这个平面图的矩形就是一个uv坐标系; 取值区间为[0，1]; （图片的宽深百分比）;

如下图blender uv模式所示:

 

 

 

边缘情况与超出情况

我们都知道三点就能确定一个平面区间;

如果在边缘的话可能出现拉伸处理

 

 

如果纹理图片太小uv系中无显示，立方体平面上就无纹理

 

 

 

复杂模型的映射

在开发和学习中遇到的问题肯定不会那么简单;

简单介绍一个低清模型的uv：

Demo: https://thinkia.github.io/ThreeJs/demos/monster.html

运动图：

 

 

纹理组合图：

 

 

 

可以看到当模型运动的时候导致整个模型形状不同，相应的三维 uv图也有细微的差别;

模型局部因图片拉伸而导致变形;

组合图也叫雪碧图; 他的优势就是减少http请求，减轻服务器负担;劣势就是加长了图片解析时间,可能影响性能导致用户体验不佳,合成后不好修改;

 

 

高清模型的uv简要

无纹理:

 

 

 

效果图： 

 

 

纹理

 

 

要做出高清模型得把一个三维体分解成多个三维体;份数越多，越高清工作量就越大;难度越大;

图片处理办法,把大图分割碎片化解析后再用canvas拼接;这种办法的优势就是极大地减少了图片加载时间，提高极好的用户体验;但是会增加服务器的负担,严重可能导致崩溃

 

 

爱生活爱技术，只不过是在满足自己追求内心喜悦;

以上若有疑问或者谬误，还请指正。感谢您的阅读！