本章主要学习知识点
- 学习创建纹理并应用纹理
- 理解UV概念，以及学会如何自定义UV坐标
纹理texture
简单理解，纹理就是3D物体的皮肤，就像是给模型贴上一层图片，让它看起来更真实或更有细节。
可以将图片、视频或者画布包裹到3D物体的表面，其核心原理是通过 UV 坐标将 2D 图片映射到 3D 模型的每个面上（类似给礼品盒贴包装纸）。
创建纹理加载器，并加载图片
// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture/watercover/CityNewYork002_COL_VAR1_1K.png');
此时纹理会异步加载，加载完成后便可应用到材质上
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坐标，创建一个几何平面，用来贴纹理
const geometry = new THREE.PlaneGeometry(3,3)
打印看看当前几何体默认的UV坐标和其位置
console.log(geometry.attributes.uv);
console.log(geometry.attributes.position);
- 创建顶点UV数组，为每个顶点指定对应的贴图位置。
// 定义一个Float32Array类型的数组uvs，包含四个元素，分别表示四个顶点的UV坐标
const uvs = new Float32Array([
0,0, // 左下角顶点UV坐标
0.5,0, // 右下角顶点UV坐标
0.5,0.5, // 右上角顶点UV坐标
0,0.5 // 左上角顶点UV坐标
])
- 绑定uv到几何体上
// 设置UV
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
再次打印uv坐标看看
左边为自定义uv后的贴图效果，右边为默认uv的贴图效果
