简介

本系列教程需要具备threejs的基础入门知识，了场景、几何体、相机等基础概念。
学习本教程之前，建议学习【几何体】的基础知识。

什么是UV坐标

通过【几何体】的知识，我们很容易能够开发一个如图所示的二维平面

通过【纹理贴图】的知识，我们可以很容易给这个二维平面设置一个贴图背景

但是，我们现在的知识无法设置图片纹理的大小、尺寸等属性。使用UV坐标就可以实现纹理贴图的自定义渲染范围。比如，我们使用UV坐标渲染上述示例图片中的左半边部分

要想实现上述效果，我们来学习一下UV坐标系的基础知识。

UV坐标系

UV坐标系非常简单，和XY坐标系很类似，只不过它的四个点坐标是固定的。

如上图，通过（0,1）、（1,1）、（0,0）、（1,0）四个点坐标，可以渲染一整幅图。

如上图，通过（0,1）、（0.5,1）、（0,0）、（0.5,0）四个点坐标，可以渲染一整幅图的做半边部分。

现在，我们应该对UV坐标系和纹理贴图直接的渲染有了一定的认识。

几何体的UV数据

在学习UV坐标系的使用之前，我们先看看一个面几何体的UV数据长什么样。我们打印几何体对象

我们在geometry的attributes属性上可以找到其UV数据

很显然，UV数据中的array对象就是其对应的UV坐标系点，我们更改这个数据应该就会改变纹理对象的渲染效果。

通过UV坐标改变纹理的渲染区域

现在，我们试着只渲染图片的左半边区域。要改变纹理的渲染区域，我们只需要以下两步

• 定义uv的取值范围

                      ![image.png](https://cdn.nlark.com/yuque/0/2023/png/21865277/1700380339615-04b97242-dda5-49e5-ba3f-966983168fcb.png#averageHue=%239bbb48&clientId=u69282370-83a6-4&from=paste&height=346&id=iSwtc&originHeight=904&originWidth=1098&originalType=binary&ratio=1.125&rotation=0&showTitle=false&size=1314899&status=done&style=shadow&taskId=u9021a11f-b031-4928-93d1-dcd43bb604b&title=&width=420.22222900390625)
  

  // 定义uv的取值范围，左上、右上、左下、右下
  const uv = new Float32Array([0, 1, 0.5, 1, 0, 0, 0.5, 0]);
  

• 设置uv属性

  // 设置几何体attributes属性的位置normal属性
  geometry.attributes.uv = new THREE.BufferAttribute(uv, 2); //2个为一组,表示一个顶点的纹理坐标