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

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

相关推荐
Python×CATIA工业智造2 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜3 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄3 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122464 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack5 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext5 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)6 小时前
后端快捷代码
java·开发语言