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个为一组,表示一个顶点的纹理坐标
相关推荐
陌小路几秒前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing121388 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36517 分钟前
antd 组件部分API使用方法
前端
BillKu20 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆41 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞1 小时前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者1 小时前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光1 小时前
pnpm vs npm区别对比
前端·npm·node.js