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])

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

相关推荐
MediaTea4 小时前
Python IDE:Spyder
开发语言·ide·python
不枯石5 小时前
Matlab通过GUI实现点云的均值滤波(附最简版)
开发语言·图像处理·算法·计算机视觉·matlab·均值算法
不枯石5 小时前
Matlab通过GUI实现点云的双边(Bilateral)滤波(附最简版)
开发语言·图像处理·算法·计算机视觉·matlab
二十雨辰6 小时前
vite如何处理项目中的资源
开发语言·javascript
聆风吟º6 小时前
远程录制新体验:Bililive-go与cpolar的无缝协作
开发语言·后端·golang
豆浆whisky7 小时前
netpoll性能调优:Go网络编程的隐藏利器|Go语言进阶(8)
开发语言·网络·后端·golang·go
蓝天白云下遛狗7 小时前
go环境的安装
开发语言·后端·golang
CAir28 小时前
go协程的前世今生
开发语言·golang·协程
@大迁世界8 小时前
Go 会成为“老生态”的新引擎吗?
开发语言·后端·golang
Absinthe_苦艾酒8 小时前
golang基础语法(六)Map
开发语言·后端·golang