Three.js 进阶(uv映射的应用)

本篇主要学习内容 :

1. 什么是uv映射
2. uv映射的应用

点赞 + 关注 + 收藏 = 学会了

1.什么是uv映射

UV映射 是一种将二维纹理映射到三维模型表面的技术。在这个过程中，3D模型上的每个顶点都会被赋予一个二维坐标（U, V）。U和V分别表示纹理坐标的水平和垂直方向。这些坐标用于将纹理图像 上的像素与模型表面 上的点进行对应。通过UV映射，我们可以在模型上精确地控制纹理 的位置和方向。

1.1)创建uv贴图

// 创建uv贴图
let uvTexture = new THREE.TextureLoader().load('./texture/uv_grid_opengl.jpg')
// 创建几何体
const planeGeometry = new THREE.PlaneGeometry(2, 2)
// 材质
const planeMaterial = new THREE.MeshBasicMaterial({
    map: uvTexture,
})
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
scene.add(planeMesh)

1.2） 自定义顶点UV坐标

学习自定义顶点UV坐标 之前，首先保证你对BufferGeometry的顶点数据、纹理贴图都有一定的理解。

可回顾基础入门（四）。

顶点UV坐标的作用是从纹理贴图上提取像素映射到网格模型Mesh的几何体表面上。

浏览器控制台查看threejs几何体默认的UV坐标数据。

// uv值
let uv = new Float32Array([
 0, 0, //图片左下角
 1, 0, //图片右下角
 1, 1, //图片右上角
 0, 1, //图片左上角
])

绘制自定义顶点几何体和自定义uv坐标点

// 顶点几何体
const geometry = new THREE.BufferGeometry()
// 索引绘制
const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0])
// 顶点属性
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
// 索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0])
// 索引属性
geometry.setIndex(new THREE.BufferAttribute(indices, 1))
// uv值
let uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
// uv属性
geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2))
// 材质
const material = new THREE.MeshBasicMaterial({
    map: uvTexture,
})

稍作修改看下变化

// uv值
let uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0])

到此进阶（一）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️