UV坐标轴

# 关于UV坐标的概念

UV就是一张二维图像，UV映射就是将二维图像投影到三维模型的表面以进行纹理映射的3D建模过程。

U代表水平方向，V代表垂直方向，所以U和V就代表了2D纹理的轴，而 X,Y,Z 则用于表示三维模型空间中3D对象的轴。

UV贴图代表的是所有应用程序都在使用的纹理创建的基本原理.UV贴图是在多边形3D模型建模完成之后被创建的, 且拥有与3D对象同样的网格结构, 不过所有这些多边形都被转换到了2D空间中, 因此它们可能会发生变形.

此动图展示了对应于3D模型部分的UV贴图部分.

在three.js中UV映射，在纹理图的原点在其左下方，坐标为(0,0),右下方为(1,0)，左上方为(0,1)，右上方为(1,1), uv的范围永远都是 0~1之间的浮点数, 可以把他理解为只有0~1的xy轴

# GLSL中的uv

在RawShaderMaterial原始着色器材质和ShaderMaterial着色器材质中, 可以获得uv坐标, 这里通过传入的uv参数修改gl_FragColor片元颜色

• uv坐标可以理解为x(u)y(v), 范围为0~1之间的浮点数

 // 设置精度
 precision mediump float;
 
 // 接收公共值
 varying vec2 vUv;
 
 void main() {
   // 设置片元颜色 r红 g绿 b蓝 a透明度
   gl_FragColor = vec4(vUv.x, vUv.y, 1.0, 1.0); // 保留蓝色, 给红绿加点蓝色
   // 或者直接设置
   // gl_FragColor = vec4(vUv, 1.0, 1.0);
 }
 

• 给红绿加点蓝色后的实现效果