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

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

相关推荐
Mintopia5 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
Mintopia5 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
BillKu30 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL32 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
LZQqqqqo33 分钟前
C# 接口(interface 定义接口的关键字)
java·开发语言·c#
寒水馨40 分钟前
Java 9 新特性解析
java·开发语言·新特性·java9·jdk9
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
拓端研究室1 小时前
专题:2025医药生物行业趋势与投融资研究报告|附90+份报告PDF、原数据表汇总下载
android·开发语言·kotlin
江城开朗的豌豆1 小时前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js