当前位置:首页 > 前端开发 > 正文内容

ThreeJs-03原料进阶

邻居的猫1个月前 (12-09)前端开发1499

一.uv贴图

在3D核算机图形学中,UV映射是一种将2D纹路映射到3D模型外表的办法。在这儿,“U”和“V”代表了2D纹路空间的坐标,这与2D笛卡尔坐标体系中的“X”和“Y”是相似的。在3D模型的每个极点上,都会有一组对应的UV坐标,它们界说了3D模型在这个极点上的外表应当对应纹路图画的哪个部分。

UV坐标一般被储存在模型的极点特点中,并与其他特点(如极点方位、法线向量等)一同被传递到烘托管线中。在烘托进程中,像素上色器会运用这些UV坐标来从纹路中采样色彩,然后用这些色彩来上色模型的外表。

UV坐标的取值规模一般是[0, 1],其间(0,0)对应纹路的左下角,(1,1)对应纹路的右上角。可是,也能够运用超出这个规模的值,这一般会导致纹路的重复或镜像,详细的效果取决于纹路的盘绕办法(wrap mode)。

UV映射的首要应战之一是怎样有效地将2D纹路映射到杂乱的3D形状上,以防止拉伸、紧缩或其他办法的失真。这一般需求专门的UV打开或UV拆分东西,以及一些手动的调整作业。

总的来说,UV特点在3D场景中是非常重要的,它们界说了怎样将纹路映射到3D模型的外表,然后极大地影响了模型的终究视觉效果。

解说

uv能够理解为一个坐标系,首要效果于给物体进行贴图的

为什么这一个贴图贴上去,就刚刚好图片在物体正中间不偏不倚

image-20241119213759699

这个鸭子运用许多个平面三角形组成,那么为什么用了这么一张图片他知道眼睛这儿用黑色,嘴巴那里用略微黑一点的

image-20241119213917384

image-20241119213946010

image-20241119213935994

举例

创立一个平面几许体,给上贴图

image-20241119214048101

可是这个几许体运用创立极点的办法完成的

image-20241119214135181

再创立一个几许体,不创立uv,直接给贴图

image-20241119214217850

左面便是有uv的,右边没有uv不知道怎样贴图便是白色

image-20241119214251515

之前用极点,三个点是一个点的方位

image-20241119214429262

这儿创立uv坐标,而且设置特点的时分声明两个点是一个坐标的方位

image-20241119214556859

image-20241119214602936

还能够把第四个点拉到下面来

image-20241119214653529

image-20241119214714272

image-20241119214719475

眼睛极点

image-20241119214822927

image-20241119214832407

二.法向量

1.解说

法向量便是投射于物体的一条直线,能够构成反射效果

image-20241120202053070

假如是快速创立的一个物体他会主动有法向量,可是经过极点创立就没有,所以在环境贴图里边就不能反射

image-20241120202154785

敞开法向量

image-20241120202222091

一起环境贴图要设置每一个能够效果的原料

image-20241120202254224

GIF

除了主动核算法向量也能够自己设置极点

image-20241120202518117

image-20241120202524101

辅助线敞开

image-20241120202545762

image-20241120202600981

在3D核算机图形学中,"法向量"(或简称为"法线")是一个向量,表明3D模型外表在某一点的方向。在每个极点上,都会有一个相关的法向量,这个向量一般被归一化,也便是说它的长度为1。

极点的法向特点在许多核算图形的范畴都有运用,但最常见的用处是在光照核算中。当光源照亮一个3D模型的时分,每个外表的亮度取决于光线与外表的相对视点。这个视点能够经过比较光线方向和外表法向量来核算。这样,即便外表的几许形状非常杂乱,也能够经过运用每个极点的法向量来进行精确的光照核算。

法向量一般在模型的创立进程中被核算出来,然后存储在每个极点的特点中。关于有些外表,如平面或许球体,法向量能够经过简略的数学公式来核算。但关于更杂乱的几许形状,或许需求经过比方"法线映射"(normal mapping)等更杂乱的技能来生成。

除了用于光照核算外,法向量也能够用于一些其他的图形效果,如环境光遮盖(ambient occlusion)、凹凸映射(bump mapping)、反射和折射等。总的来说,法向特点在3D场景中是非常重要的,它们关于烘托真实感的图画有着要害的效果。

2.极点转化

也便是之前用的position、rotate、scale等不只能够直接用办法,还能够用极点的办法

初始极点的方位

image-2024112020530270

想让他移动x轴为4

image-20241120205325556

image-20241120205331878

3.围住盒

什么是围住盒,比方这一个鸭子,有一个立方体框柱便是他的围住盒

优点在于假如想去核算鸭子的巨细,那么会去核算许多个极点很费事,可是假如他有一个围住盒核算围住盒的巨细也就上下左右几个极点就能够了

image-2024112020580344

完成

image-20241120205834672

直接加载模型

image-20241120205926276

能够检查这个物体的姓名和id

image-20241120210018549

image-20241120210028155

image-2024112021003348

在导入模型的回调里边

image-20241120210330617

可是此刻的围住盒会很大,由于他的缩放给的值很大

3.1 国际矩阵

这个时分就要用到国际矩阵,让他的改换和本地的相同份额

image-20241120210650583

image-2024112021071705

GIF

4.几许体居中和获取几许体中心

有了围住盒,能够快速让一个模型居中

image-20241120211024724

image-20241120211036218

5.获取多个物体围住盒

参加有多个物体,想让他们在一同构成一个大的围住盒去操作

得益于围住盒有这么一个办法

image-20241120211613201

三个小球

image-20241120211630223

image-20241120211746532

image-20241120211753655

也能够快速直接核算

image-20241120211817719

image-20241120211826350

6.边际几许体和线框几许体

边际几许体便是边际是经过核算得到,不再是每个平面都是用三角形组成,而线段几许体便是之前的wireframe,将一切面用三角线组成

image-20241120212559953

拿到物体的几许体,创立边际几许体,要用到线段原料

image-20241120213019806

image-20241120212707824

此刻方向不一致,那是由于这是直接拿到物体的极点来创立的,得到的最原始的方位旋转等,假如想要跟这个模型一模相同,那么需求复制到这个物体的矩阵

敞开建筑物的矩阵,然后让边际几许体赋值建筑物的矩阵,而且需求更新,decompose便是结构当时的信息分别给到边际几许体的方位、旋转和缩放

image-20241120213222043

彻底重合

image-20241120213351331

线段几许体

image-20241120213426151

image-20241120213510063

假如一个模型过大,里边许多物体都想变为边际几许体,就能够经过遍历,traverse专门获取里边的3D物体

image-20241120213834430

image-20241120213850093

GIF

扫描二维码推送至手机访问。

版权声明:本文由51Blog发布,如需转载请注明出处。

本文链接:https://www.51blog.vip/?id=416

标签: ThreeJS
分享给朋友:

“ThreeJs-03原料进阶” 的相关文章

极致功能优化:前端SSR烘托利器Qwik.js

极致功能优化:前端SSR烘托利器Qwik.js

导言 前端功能已成为网站和运用成功的要害要素之一。用户希望快速加载的页面和流通的交互,而前端结构的挑选关于完结这些方针至关重要。但是,传统的前端结构在某些情况下或许面对功能应战且存在技能壁垒。 在这个充溢应战的布景下,咱们引入了 Qwik.js 结构。Qwik.js 不只是一个前端结构,更是一种前端...

Input报错“Form elements must have labels: Element has no title attribute Element has no placeholde”

Input报错“Form elements must have labels: Element has no title attribute Element has no placeholde”

喵~ 项目开发难免会遇到些不解的问题,以下总结的是简化版,重在复现问题,解决问题。 写表单时,假如仅仅独自写了input元素,发现在后台管理睬飘红。感觉很古怪,分明没有写错语法,为什么会飘红呢? 1、写一段最一般的html页面 2、右键,挑选 “查看”,翻开后台管理器,指向input元素 此刻,能...

Next.js项目App目录怎么简略集成markdown博客

Next.js项目App目录怎么简略集成markdown博客

文章原文:Next.js项目App目录怎么简略集成markdown博客 此教程适用于比较简略的项目完结,假如你是刚入门next,而且不想用太杂乱的办法去完结一个博客项目,那么这个教程就挺合适你的。 Next.js官方关于markdown的文档有阐明过怎么烘托markdown,也是针对App目录的,但...

jq设置css样式

jq设置css样式

在jQuery中,你可以使用`.css`方法来设置元素的CSS样式。这个方法可以用来获取或设置一个或多个CSS属性。 基本用法1. 获取CSS属性: ```javascript var color = $.css; ```2. 设置CSS属性: ```javascript $.c...

html网页特效代码,html官方下载免费版

html网页特效代码,html官方下载免费版

创建一个HTML网页特效需要结合HTML、CSS和JavaScript。下面是一个简单的示例,创建一个带有旋转特效的按钮:```html旋转特效按钮 .rotatebutton { padding: 10px 20px; backgroundcolor: 4CAF50; colo...

html引入js文件,```html            Document    Hello, World!    ```

html引入js文件,```html Document Hello, World! ```

```html Document Hello, World! ``` HTML引入JS文件:实现动态交互的秘籍在网页开发中,HTML、CSS和JavaScript是三大基石。HTML负责结构,CSS负责样式,而JavaScript则负责动态交互。将JavaScrip...