3.3 UV 映射与贴面工艺：花纹落在哪、怎么落

3.3 UV 映射与贴面工艺：花纹落在哪、怎么落

本节摘要：UV 坐标是立体表面的展开地图，决定贴图的每个像素落在物件哪个位置。本节讲清默认 UV 的展开逻辑、四种包裹方式的适用场景与坑位，并演示 PBR 贴图组合拳与一面定制 logo 的完整贴面案例，收束上漆工位。

展开地图：从像素到表面

贴图是一张平面图，货箱是立体物，两者之间必须有一张"裁剪纸样"说明怎么包——这张纸样就是 UV 坐标。几何体的每个顶点除 xyz 位置外还带一组 uv 值（0 到 1 的二维坐标），渲染时显卡按 uv 把贴图像素"钉"到表面上。所谓 UV 展开，就是把立体表面摊平到一张方格纸上的过程：摊得顺，花纹横平竖直；摊得拧，花纹歪斜拉伸。

自带几何体的默认 UV 都已展开好：PlaneGeometry 是完整的一张方格（左下角 uv 0,0、右上角 1,1），BoxGeometry 是六个面各占图上一块。所以"贴歪了"多数不是 UV 的错，而是你不知道默认展开长什么样——本节第一件事就是把这个默认地图画出来。

图：立方体默认 UV 展开与四面包裹方式

动手：给货箱贴一面定制 logo

背景：客户要求最高的那只货箱正面贴公司 logo，其余面保持木纹。难点在 BoxGeometry 六面共享一张贴图——直接换贴图，六面全是 logo。

操作：方案是把"logo 面"与"木纹面"做成两个材质。BoxGeometry 生成时按顺序给六个面准备了六组材质槽位（右、左、上、下、前、后），数组材质正好逐面对应。

// 六面材质数组：顺序固定为 右、左、上、下、前、后
const woodSide = new THREE.MeshStandardMaterial({ map: woodColor });

// logo 贴图：干净底图上放标志，尺寸取 2 的幂（如 256 乘 256）
const logoTex = loader.load('brand_logo.png');
logoTex.colorSpace = THREE.SRGBColorSpace;

const logoFace = new THREE.MeshStandardMaterial({
  map: logoTex,
  roughness: 0.5
});

const cratedBox = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  [woodSide, woodSide, woodSide, woodSide, logoFace, woodSide] // 第 5 槽是前面
);
​

结果：货箱五面木纹、正面 logo，转到正面时标志清晰不变形。若把 logo 贴图换成非方形（如 300 乘 180），标志会被拉伸成横条——因为 UV 区域是固定的方形格子，图的比例不同就按格子硬拉。

解读：这个案例浓缩了贴面工艺的三条规则。第一，逐面控制优先走材质数组而非改 UV——改 UV 需要操作底层缓冲属性，收益配不上复杂度；材质数组直观且不碰数据。第二，贴图比例匹配 UV 区域比例，方形格子配方形图，否则拉伸无解；真需要非方形图，先在绘图软件里把内容摆进方形画布。第三，repeat 与包裹方式是"整图级"设置，材质数组里的每个槽位可以各有各的纹理设置——木纹面平铺两次、logo 面单张不重复，互不影响。

变式：客户后续要求 logo 亮着的时候微微反光、暗处也隐约可见——给 logoFace 加 emissive 与 emissiveMap 两项（都指向 logo 贴图，emissiveIntensity 给 0.15），标志在夜里自发光，这是自发光与物理反光的合成用法。

图集工艺的进阶细节

3.1 埋下的图集种子在本节展开成可执行的工艺。图集的本质是把多张贴图合成一张大图，让多个面或多个物件共享同一次纹理采样。手工做法：在绘图软件里建一张 1024 见方的画布，把各面图案分区摆放并记录每区的归一化坐标；代码做法：用材质数组对应到图集的各区（对 BoxGeometry 而言，六槽对应六区，每槽的贴图用 offset 与 repeat 属性把采样窗口缩到自己的分区）。offset 与 repeat 是 UV 工艺的另一对旋钮：repeat 缩小采样窗口、offset 平移窗口位置，两者配合即可在不动几何体 UV 的前提下完成分区取图。图集的收益在批量场景兑现：十个各带独立贴图的物件合批后，绘制调用从十次归一，显存也从十张零散图的碎片浪费收敛到一张图的整块利用——这是 8.1 优化清单里"图集收编零散贴图"的完整工艺版。

排错台：三种贴面事故的会诊

事故一，"花纹全是斜的拉伸纹"。UV 区域比例与贴图比例错配，方形格子硬塞长条图必拉斜；处置是按 UV 区域比例重排版面，或换用能保持比例的映射方案。事故二，"接缝处有一条明显的色带"。平铺包裹下贴图左右边缘像素不衔接，米普链采样在接缝处混进了对侧颜色；处置是让贴图本身四边可循环（绘图软件里的偏移检验），或改用镜像平铺缓解。事故三，"贴图看起来糊，近看也不清楚"。先查贴图原图分辨率是否被 GPU 限制（小显存设备可能拒绝大图并回退到 1 乘 1 黑图或低清版本），再查是否忘了设各向异性过滤，最后才怀疑米普链——三查顺序从资源到采样，别一上来就怪贴图质量。

自定义 UV：什么时候值得动真格

材质数组与图集工艺覆盖了九成贴面需求，剩下的一成才需要动真正的 UV 数据——比如给圆柱侧面按高度渐变贴色带、把一段视频按环形排布到天幕。动真格的入口是几何体的 uv 缓冲属性：遍历每个顶点的 uv 分量按规则改写（如把 uv.y 替换成世界高度），改完标记属性更新即可。动手前先立两条戒律：一是只在"参数表达不了"时才改 UV，一切能用 repeat、offset、材质数组解决的，都不值得碰数据；二是改 UV 前把原数据备份一份，贴面工艺的回退成本必须保持为零。本节的贴面订单至此齐备：默认 UV 认格局、包裹方式认内容、图集认批量、自定义 UV 只在万不得已时出场。

本节要点回顾

• UV 是裁剪纸样：顶点自带 uv 坐标，贴图变形的根源几乎都是 UV 区域与图的比例错配；
• BoxGeometry 六面六槽：材质数组按右左上下前后逐面对应，逐面控制不走 UV 修改；
• 包裹方式按内容选：连续纹理平铺用 Repeat，整图标牌用 Clamp 防渗边；
• 贴图尺寸取 2 的幂：兼容性与米普链效率都靠它，非方形内容先摆进方形画布；
• 组合拳的本质是喂料：颜色、法线、粗糙度三图各管一层表现，图集合批是量产后手。

上漆工位收工，沙盘已成"视觉成品"。下一章架机位：客户要凑近看 logo、拉远看全貌——透视与正交机位、轨道控制与运镜手感，是机位工位的订单。