想象一下，你精心打造的 3D 模型就像刚建好的毛坯房 —— 线条硬朗却毫无生气。这时候，纹理（Texture）就像墙纸、地毯和壁画的组合包，能瞬间让你的数字空间充满灵魂。但在 Three.js 的世界里，纹理可不是简单的 "贴上去" 就完事的活儿，它背后藏着一套像素级的魔法规则。
纹理的本质：像素军团的排列艺术
在计算机的底层逻辑里，纹理本质上是二维像素数组的华丽变身。每张图片都是由无数个小方块（像素）组成的军团，当 Three.js 把它们贴到 3D 模型上时，就像给士兵们分配作战位置。而纹理的各种属性，其实就是指挥这些像素军团如何排列、变形和移动的军令。
让我们先创建一个基础纹理作为研究对象：
// 加载纹理图片（就像招募像素士兵）
const textureLoader = new THREE.TextureLoader();
const wallTexture = textureLoader.load('brick-wall.jpg');
// 给几何体穿上"像素外衣"
const material = new THREE.MeshBasicMaterial({ map: wallTexture });
const cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), material);
scene.add(cube);
这段代码看似简单，却包含了从像素读取到坐标映射的复杂过程 —— 就像把一幅画精确地拓印到不规则的陶罐上。
重复属性：像素军团的阅兵式
如果你想让砖块纹理在墙壁上重复出现，就需要用到纹理的重复属性。这就像壁纸不够长时，我们会重复拼接直到铺满整个墙面。
// 让纹理在x轴重复2次，y轴重复3次
wallTexture.repeat.set(2, 3);
// 关键咒语：告诉Three.js允许重复
wallTexture.wrapS = THREE.RepeatWrapping; // 水平方向（S对应UV坐标的U）
wallTexture.wrapT = THREE.RepeatWrapping; // 垂直方向（T对应UV坐标的V）
这里的wrapS和wrapT是 Two.js 的核心指令。在图形学底层，S和T对应纹理的水平和垂直坐标（替代了我们熟悉的 X 和 Y），它们的默认值是ClampToEdgeWrapping—— 就像严厉的门卫，会把超出边界的像素死死按在边缘位置。
为什么需要显式开启重复？因为 GPU 在处理纹理时，默认认为 "一张图就够了"。这就像打印机默认只打一页，如果你要打印多份，就得明确告诉它 "重复打印"。
偏移属性：像素军团的集体移位
有时候，你可能想让纹理整体偏移一点，就像贴墙纸时发现图案没对齐，轻轻挪一下的小动作。
// 让纹理向右偏移20%，向下偏移10%
wallTexture.offset.set(0.2, 0.1);
这个看似简单的属性背后，其实是纹理坐标的整体平移。在 Three.js 的计算逻辑里，纹理坐标以 0 到 1 为范围（就像百分比），0.1 意味着整个纹理向右挪动自身宽度的 10%。想象一下，这就像把整个像素军团集体向右看齐，每个士兵都迈出了相同的步伐。
有趣的是，偏移值可以超过 1 或者为负数。当你设置offset.set(1.2, -0.3)时，相当于把纹理向右挪动 1.2 个自身宽度，再向上挪动 0.3 个自身高度 —— 就像把墙纸多贴了一圈再往左拽一点。
旋转属性：像素军团的队列转向
让纹理旋转起来，可以创造出更自然的视觉效果，比如斜铺的地砖或者旋转的唱片。
// 让纹理旋转45度（注意：这里用弧度计算，π/4等于45度）
wallTexture.rotation = Math.PI / 4;
// 设置旋转中心为纹理中心（默认是左上角）
wallTexture.center.set(0.5, 0.5);
这段代码揭示了一个有趣的底层现象：纹理旋转默认是以左上角（0,0 点）为轴心的，这就像你钉住纸张的一角来旋转它。如果不设置center属性，旋转后的纹理会像被风吹起的海报一样偏离原来的位置。
在计算机图形学中，这种旋转本质上是通过矩阵变换实现的 —— 每个像素的坐标都要经过三角函数的洗礼，才能找到自己新的位置。幸运的是，Three.js 已经帮我们封装了这些复杂的计算。
放大与缩小：像素军团的聚散术
当 3D 模型离相机很近时，纹理会被极度放大，就像你把图片凑到眼前看；而当模型很远时，纹理又会被缩小成模糊的色块。这时候，magFilter和minFilter属性就派上用场了。
// 当纹理被放大时，使用双线性过滤（让像素边缘更平滑）
wallTexture.magFilter = THREE.LinearFilter;
// 当纹理被缩小时，使用三线性过滤（多分辨率混合采样）
wallTexture.minFilter = THREE.LinearMipmapLinearFilter;
这两种过滤方式就像像素军团的聚散法则：放大时，LinearFilter 让相邻像素互相融合，避免出现明显的方块感；缩小时，Mipmap 技术会提前准备好不同分辨率的纹理版本，就像军队有不同规模的作战编制，确保在任何距离下都能保持最佳视觉效果。
格式与类型：像素军团的制服规范
纹理在 GPU 中存储和处理的方式，由format和type属性决定。这就像给像素军团制定统一的制服标准，方便 GPU 快速识别和调度。
// 常见组合：RGBA格式+无符号字节类型
wallTexture.format = THREE.RGBAFormat;
wallTexture.type = THREE.UnsignedByteType;
在底层实现中，RGBAFormat意味着每个像素由红、绿、蓝、透明度四个通道组成（就像四色印刷原理），而UnsignedByteType则规定了每个通道的取值范围是 0-255（8 位无符号整数）。这种组合平衡了色彩丰富度和存储效率，就像给士兵们设计了既美观又实用的作战服。
结语：像素魔法师的进阶之路
掌握 Three.js 纹理属性，就像学会了像素世界的魔法咒语。从重复排列到旋转偏移，从过滤方式到数据格式，每一个属性都是操控数字视觉的关键旋钮。当你能自如地指挥这些像素军团时，无论是创建逼真的大理石地面，还是梦幻的星空背景，都将变得轻而易举。
记住，最好的纹理效果往往来自对细节的打磨。就像一位经验丰富的设计师会调整墙纸的接缝位置，优秀的 Three.js 开发者也会精心调配纹理的各项属性，让每个像素都在 3D 世界中找到最完美的位置。
现在，拿起你的代码魔杖，去驯服那些跃跃欲试的像素军团吧！
