本章主要学习知识点
- 学习设置纹理阵列
- 实现纹理动画效果
纹理阵列
纹理阵列指的是将一张小图重复平铺在模型表面，就像贴瓷砖一样，通过重复排列小图来覆盖大面积的模型。
在Three.js 中，通过设置纹理的重复参数（repeat）和环绕模式（wrapS/wrapT），让贴图在UV坐标系中横向或纵向重复拼接。
设置环绕模式，重复纹理多次
texture.wrapS = THREE.RepeatWrapping; // 水平方向
texture.wrapT = THREE.RepeatWrapping; // 垂直方向
texture.repeat.set(10,10) // 设置重复次数
你将看到如下效果
使用中需要注意
贴图撕裂: 确保贴图边缘无缝（设计时左右/上下边缘颜色一致）纹理尺寸限制: 推荐使用2的幂次方尺寸（如256x256、512x512），否则部分设备可能不兼容环绕模式选择:- RepeatWrapping 默认重复模式
- MirroredRepeatWrapping 镜像翻转重复，消除接缝感
UV动画
UV动画是通过动态修改模型的UV坐标，让贴图在模型表面“动起来”
常见应用场景
流动效果: 水面流动、岩浆滚动（通过横向偏移贴图实现动态感）循环背景：星空旋转、传送带运动（贴图无缝循环平铺）特效交互: 闪电特效、能量光带（局部UV坐标快速变化）
通过持续改变UV坐标的偏移量offset或重复次数repeat，可实现如下效果
// 修改纹理偏移量
texture.offset.x += 0.01;
// 渲染场景和相机
renderer.render( scene, camera );
requestAnimationFrame( animation );
上图示例中使用了网格辅助器，简单了解下
const gridHelper = new THREE.GridHelper(100,35, 'deepskyblue','deepskyblue')
scene.add(gridHelper)
网格辅助器是一种类似棋盘格的平面网格，用于定位物体在地面的位置。
