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个为一组,表示一个顶点的纹理坐标
相关推荐
lang2015092821 分钟前
Spring远程调用与Web服务全解析
java·前端·spring
listhi5202 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木3 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊3 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost3 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns4 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年4 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴4 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心4 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart4 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter