前言

前面我们渲染出来的物体跟现实生活中差距甚大，要想与现实物体靠齐就离不开纹理贴图。在学习纹理贴图之前，我们先了解一下UV坐标。

UV

UV坐标是一种在计算机图形学中使用的二维坐标系统，用于确定纹理图像上的一个点，U表示在水平方向上的位置，V表示在垂直方向上的位置。UV坐标系统通常使用0到1之间的值来表示一个纹理上的像素位置，该坐标以左下角为坐标原点（0,0），以右上角为（1.0,1.0）点。在three渲染物体时，UV坐标跟物体顶点坐标进行映射，在渲染过程中会使整个纹理贴合到三维模型表面上，以此来实现更加细致的纹理表现效果。

映射

正如我们上面提到的UV坐标跟物体的顶点坐标是有映射关系的，相当于地球仪上的点对应着世界地图上的点，地图上的点范围都在0-1之间。

纹理坐标

在three几何体中有对应的属性用以设置UV坐标，对应的UV坐标可以分为两组：

• 用来描述bumpMap（凹凸贴图）、normalMap（法线贴图）等。
• 用来描述lightMap（光照贴图）。 Geometry会在创建的时候自动生成UV坐标，当然我们也可以去自定义UV坐标：

   //几何体
const geometry = new THREE.BufferGeometry();
//创建顶点坐标
const vertices = new Float32Array([0, 0, 0, 5, 0, 0, 5, 5, 0, 0, 5, 0]);
const attr = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attr;
//设置法向量
const normals = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);
const indexes = new Uint16Array([0, 1, 2, 0, 2, 3]);
// 创建索引
geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组
const uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
// 设置uv
geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2);
const material = new THREE.MeshBasicMaterial({
  color: 0x8888,
  side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

该矩形由两个三角形组成，并且每个顶点都有对应的uv坐标。在控制台打印mesh就能在材质里找到我们设置好的uv坐标。

总结

本节介绍了UV坐标，顶点坐标与UV坐标之间的映射关系，这个也是纹理贴图能够与物体结合的底层逻辑。