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模式所示:

threejs - uv 映射 简要

边缘情况与超出情况

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

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

threejs - uv 映射 简要

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

threejs - uv 映射 简要

复杂模型的映射

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

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

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

运动图:

threejs - uv 映射 简要

纹理组合图:

threejs - uv 映射 简要

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

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

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

高清模型的uv简要

无纹理:

threejs - uv 映射 简要

效果图:

threejs - uv 映射 简要

纹理

threejs - uv 映射 简要

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

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

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

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

上一篇:ThreeJS文字作为纹理贴图


下一篇:threejs绕轴转,粒子系统,控制器操作等(二)