[three.js]UV动画

背景

好久没接触UV动画这块内容，突然接手了一个涉及这块的开发任务，被打个措手不及。完成任务后，把涉及到的知识点记录下。其实做的就是一个光带。

UV坐标系

UV坐标系是将贴图贴到某个面上时，指定怎么贴合的坐标系。以平面几何体为例，U坐标对应几何体的X坐标，V坐标对应几何体的Y坐标。对应关系是将X坐标上平面几何体的宽度映射到U坐标上的单位1，将Y坐标上平面几何体的高度映射到V坐标上的单位1。

UV动画

一个光带的示例如下：

const geometry = new THREE.PlaneGeometry(200, 200);
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./纹理1.jpg');

const material = new THREE.MeshLambertMaterial({
    map: texture,//map表示材质的颜色贴图属性
});
const mesh = new THREE.Mesh(geometry, material);

// 设置贴图在U方向和V方向上的平铺次数
// texture.repeat.set(1, 1);	// U方向铺1，V方向铺1，1张贴图贴住平面整体
// texture.repeat.set(2, 1);	// U方向铺2，V方向铺1，2张贴图沿U方向贴住平面整体
texture.repeat.set(1, 0.5);	// U方向铺1，V方向铺0.5，沿V方向将贴图裁成一般，半张贴图贴住平面整体

texture.offset.y +=0.6;//纹理V方向偏移
// 纹理映射模式(包裹模式)
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;            
// 将贴图 V 设置为 -0.4，从0.6到-0.4正好是一个贴图的高度，offset的偏移方向我也很迷，正好和我想象的方向相反，所以我的方法就是按我想象的方向的反方向来就行，或者两个方向都跑一下
const tween = new TWEEN.Tween(texture.offset).to({ y: -0.4 }, 5000 / 3);
// 设置重复次数
tween.repeat(Infinity);
// 开始动画
tween.start();                                                                                    

参考

参考