threejs - uv 映射简要

2024-05-04 03:46:21

啥也不说先上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拼接;这种办法的优势就是极大地减少了图片加载时间，提高极好的用户体验;但是会增加服务器的负担,严重可能导致崩溃

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

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

转载于:https://www.cnblogs.com/Thinkia/p/8629229.html

threejs - uv 映射简要相关推荐

深入理解Three.js（WebGL）贴图（纹理映射）和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,"贴图"的翻译要更直观,而"纹理映射"更准确.).为了能够查看 ...
【Blende UV映射01】创建UV 使用UV贴图处理纹理
写在前面这是进行云渲染的最后一步,实践!! 会跟着这个Blender 2.8 UV Mapping教程快速学习一边UV映射的东西,已经是最最最最基础的了. 本文是教程的P1-P7的过程记录. 1 U ...
three.js UV映射简述
今天来说一说uv映射,什么是uv映射?uv映射就是将二维的贴图映射到对象的一个面(或者多个面)上.说到这个问题,我们就不得不了解一下Geometry的点.面和uv的结构.我们以BoxGeometry为 ...
threejs uv贴图
原始贴图: 实现效果: //cube uv贴图 var cubeMaterial=new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTextu ...
Threejs中 Blender建模的问题 ------ uv贴图中修改贴图的方向和uv贴图材质重复不起作用
修改贴图的方向(只有一个面) 数字键盘/来在3D视图中控制视野中选中对象的显示切换首先确保添加了uv的数据,不然会在最终的显示材质时有问题直接在Blender建模,添加材质,添加纹理在three ...
基于图像到UV Map映射的3D手部高保真重建网络（ICCV2021）
论文地址:https://arxiv.org/pdf/2102.03725v2.pdf Introduction Challenge:由于不同的手部姿势和严重的遮挡,目前方法的结果缺乏准确性和保真度. ...
元宇宙基础-Three.js | 大帅老猿threejs特训营
day01作业打卡 WebGL简介 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过 ...
threejs 物体根据相机位置显示_threejs
threejs 点击数: 10347 简介既然我们可以使用canvas元素创建纹理,Three.js也给我们提供了可以实现video创建纹理的方法.我们通过Three.js提供的VideoTextur ...
ThreeJs 3D编程
新版本的主流浏览器都已支持WebGL,这样不需要插件就能在浏览器中创建三维图形.但WebGL提供的接口过于复杂,直接使用来创建三维图形和动画非常繁琐.Three.js函数库将强大的功能融汇其中,方便使 ...
threejs看这里就行了
threejs 现代浏览器都支持 WebGL,这样我们就不必使用 Flash.Java 等插件就能在浏览器中创建三维图形.虽然 WebGL 提供的接口非常丰富和强大,但使用起来过于繁琐和复杂. Thr ...

最新文章

热门文章