啥也不说先上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拼接;这种办法的优势就是极大地减少了图片加载时间,提高极好的用户体验;但是会增加服务器的负担,严重可能导致崩溃
爱生活爱技术,只不过是在满足自己追求内心喜悦;
以上若有疑问或者谬误,还请指正。感谢您的阅读!