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

本篇主要学习内容 :

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

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

1.什么是uv映射

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

1.1)创建uv贴图
js 复制代码
// 创建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坐标数据。

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

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

js 复制代码
// 顶点几何体
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,
})

稍作修改看下变化

js 复制代码
// uv值
let uv = new Float32Array([0, 0, 1, 0, 1, 1, 0, 0])

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

相关推荐
钟离墨笺3 分钟前
Go语言-->sync.WaitGroup 详细解释
开发语言·后端·golang
小L~~~8 分钟前
Python打造美观的桌面温馨提醒弹窗
开发语言·python
汤姆yu9 分钟前
基于python大数据的特产推荐系统
大数据·开发语言·python
四念处茫茫10 分钟前
仓颉技术:FFI外部函数接口
开发语言·后端·仓颉技术
ColderYY19 分钟前
Python中的正则表达式
开发语言·python·正则表达式
若疆赤云online25 分钟前
SpringGateway处理跨域
java·开发语言
Every exam must be27 分钟前
10.27 JS学习12
开发语言·javascript·学习
雾里云山36 分钟前
pgsql常用函数
java·开发语言·数据库·sql
星期天要睡觉37 分钟前
提示词(Prompt)——链式思维提示词(Chain-of-Thought Prompting)在大模型中的调用(以 Qwen 模型为例)
开发语言·人工智能·python·语言模型·prompt
程序00742 分钟前
微信小程序app.js错误:require is not defined
javascript·微信小程序·小程序