Three.js-硬要自学系列10 (创建纹理贴图、自定义顶点UV坐标)

本章主要学习知识点

学习创建纹理并应用纹理
理解UV概念，以及学会如何自定义UV坐标

纹理texture

简单理解，纹理就是3D物体的皮肤，就像是给模型贴上一层图片，让它看起来更真实或更有细节。

可以将图片、视频或者画布包裹到3D物体的表面，其核心原理是通过 UV 坐标将 2D 图片映射到 3D 模型的每个面上（类似给礼品盒贴包装纸）。

创建纹理加载器，并加载图片

js 复制代码

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture/watercover/CityNewYork002_COL_VAR1_1K.png');

此时纹理会异步加载，加载完成后便可应用到材质上

js 复制代码

const material = new THREE.MeshLambertMaterial({
    map: texture   // 设置纹理贴图
})

通过 map 属性将纹理赋予材质，物体表面就会显示图片

常用的一些纹理属性

属性	作用	示例值
`repeat`	控制纹理重复次数（如瓷砖效果）	`texture.repeat.set(2, 2)`
`offset`	平移纹理位置	`texture.offset.set(0.5, 0)`
`rotation`	旋转纹理（弧度制）	`texture.rotation = Math.PI/4`
`wrapS/wrapT`	设置水平/垂直方向重复模式	`THREE.RepeatWrapping`

自定义顶点UV坐标

UV坐标是二维贴图与三维模型的"粘合定位器"，你可以理解为给快递盒贴标签时需要确定标签的位置

U和V代表着贴图上的横纵坐标X和Y轴，无论贴图尺寸多大，UV坐标始终把图片看作一个"单位正方形"，左下角是(0,0)，右上角是(1,1)

为什么要自定义UV坐标

精准贴图：想让贴图的某部分（如窗户）对齐模型特定区域（如建筑模型的窗户）
重复平铺：让砖墙纹理在模型表面重复排列（如瓷砖地板）
动态效果：实现滚动的水面、旋转的广告牌等动画

好，让我们开始尝试自定义UV坐标，创建一个几何平面，用来贴纹理

js 复制代码

const geometry = new THREE.PlaneGeometry(3,3)

打印看看当前几何体默认的UV坐标和其位置

js 复制代码

console.log(geometry.attributes.uv);
console.log(geometry.attributes.position);

创建顶点UV数组，为每个顶点指定对应的贴图位置。

js 复制代码

// 定义一个Float32Array类型的数组uvs，包含四个元素，分别表示四个顶点的UV坐标
const uvs = new Float32Array([
  0,0,   // 左下角顶点UV坐标
  0.5,0, // 右下角顶点UV坐标
  0.5,0.5, // 右上角顶点UV坐标
  0,0.5 // 左上角顶点UV坐标
])

绑定uv到几何体上

js 复制代码

// 设置UV
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))

再次打印uv坐标看看

左边为自定义uv后的贴图效果，右边为默认uv的贴图效果

以上案例均可在案例中心查看体验

THREE 案例中心