010uv坐标uv坐标的理解纹理贴图直接贴在几何体上面，那么具体是如何贴上去的呢，每个几何体都有自己的vu坐标，这个坐

该系列文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

uv坐标的理解

纹理贴图直接贴在几何体上面，那么具体是如何贴上去的呢，每个几何体都有自己的vu坐标，这个坐标就是决定文理贴图具体怎么贴

以平面形状为例子，一张图的4个坐标点（全部都是0-1）为（0，0）（0，1）（1，1），（1，0）这样就是铺满全部贴图，通过改变这个坐标来决定使用贴图的那部分

uv坐标的自定义如何实现

# 核心代码
const uvs = new Float32Array([
    0, 0.5,
    0.5, 0.5,
    0, 0,
    0.5, 0
]);

geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2);

uv动画的理解

纹理对象 Texture 有个 offset 属性，可以让纹理贴图在 x、y 方向做一些偏移。

这相当于改变了 uv 坐标，所以这种改变 texture.offset 的动画叫做 uv 动画

uv动画的例子实现

# 核心代码
function render() {
    mesh.material.map.offset.y += 0.01;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
<!--需要再竖的方向重复  -->
texture.wrapT = THREE.RepeatWrapping;