threejs教程-UV坐标

简介

本系列教程需要具备threejs的基础入门知识,了场景、几何体、相机等基础概念。

学习本教程之前,建议学习【几何体】的基础知识

什么是UV坐标

通过【几何体】的知识,我们很容易能够开发一个如图所示的二维平面

通过【纹理贴图】的知识,我们可以很容易给这个二维平面设置一个贴图背景

但是,我们现在的知识无法设置图片纹理的大小、尺寸等属性。使用UV坐标就可以实现纹理贴图的自定义渲染范围。比如,我们使用UV坐标渲染上述示例图片中的左半边部分

要想实现上述效果,我们来学习一下UV坐标系的基础知识。

UV坐标系

UV坐标系非常简单,和XY坐标系很类似,只不过它的四个点坐标是固定的。

如上图,通过(0,1)、(1,1)、(0,0)、(1,0)四个点坐标,可以渲染一整幅图。

如上图,通过(0,1)、(0.5,1)、(0,0)、(0.5,0)四个点坐标,可以渲染一整幅图的做半边部分。

现在,我们应该对UV坐标系和纹理贴图直接的渲染有了一定的认识。

几何体的UV数据

在学习UV坐标系的使用之前,我们先看看一个面几何体的UV数据长什么样。我们打印几何体对象

我们在geometry的attributes属性上可以找到其UV数据

很显然,UV数据中的array对象就是其对应的UV坐标系点,我们更改这个数据应该就会改变纹理对象的渲染效果。

通过UV坐标改变纹理的渲染区域

现在,我们试着只渲染图片的左半边区域。要改变纹理的渲染区域,我们只需要以下两步

  • 定义uv的取值范围
js 复制代码
// 定义uv的取值范围,左上、右上、左下、右下
const uv = new Float32Array([0, 1, 0.5, 1, 0, 0, 0.5, 0]);
  • 设置uv属性
js 复制代码
// 设置几何体attributes属性的位置normal属性
geometry.attributes.uv = new THREE.BufferAttribute(uv, 2); //2个为一组,表示一个顶点的纹理坐标
相关推荐
SUPER526624 分钟前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx1834 分钟前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友3 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar3 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界5 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙6 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump6 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD6 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro6 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin7 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial