台州市住房和城乡建设厅网站,wordpress session 表,郑州发布最新消息今天,手机在线作图软件背景
好久没接触UV动画这块内容#xff0c;突然接手了一个涉及这块的开发任务#xff0c;被打个措手不及。完成任务后#xff0c;把涉及到的知识点记录下。其实做的就是一个光带。
UV坐标系
UV坐标系是将贴图贴到某个面上时#xff0c;指定怎么贴合的坐标系。以平面几何…背景
好久没接触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方向铺1V方向铺11张贴图贴住平面整体
// texture.repeat.set(2, 1); // U方向铺2V方向铺12张贴图沿U方向贴住平面整体
texture.repeat.set(1, 0.5); // U方向铺1V方向铺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(); 参考
参考
