简介

本系列教程需要具备threejs的基础入门知识，了场景、几何体、相机等基础概念。

学习本教程之前，建议学习【几何体】的基础知识

什么是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数据长什么样。我们打印几何体对象

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

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

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

js 复制代码

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

js 复制代码

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