首页 > 其他分享 >ThreeJs-03材质进阶

ThreeJs-03材质进阶

时间:2024-11-25 22:22:40浏览次数:6  
标签:03 ThreeJs 进阶 模型 UV 几何体 顶点 向量 3D

一.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

标签:03,ThreeJs,进阶,模型,UV,几何体,顶点,向量,3D
From: https://www.cnblogs.com/heymar/p/18568918

相关文章

  • [luoguP1903] 数颜色
    题意原题链接给定序列\(a\),每次查询一个区间\([l,r]\)中有多少个不同的数,或进行单点修改。sol如果不修改的话,本题就是普通莫队[luoguSP3267]D-query由于有修改,所以需要再增加一维,记录这次查询是在多少次修改以后查询的,然后在莫队代码后面添加对修改次数的处理,即暴力修改......
  • JavaEE 【知识改变命运】03 多线程(2)
    文章目录复习1.1进程和线程的区别1.2线程创建的方式1.3两者创建的区别2多线程2.1多线程的优势-增加了运行的速度2.2Thread类及常用的方法2.2.1常用见的构造方法2.2.2获取当前类的信息2.2.3Thread的⼏个常⻅属性1演示后台线程2线程是否存活3名称4线程中断5等待......
  • C++从零到进阶 ①.1顺序结构(例题+讲解)
    例题1 Hello,World!(难度评估:是人就会)❀考察点:基本输出注意:大小写输出标点 ⭐解题代码:#include<bits/stdc++.h>usingnamespacestd;intmain(){ cout<<"Hello,World!";//输出的文字字符等要用“”括起来 return0;} 例题2 A+B(难度评估:简简单单)❀考察点:简单......
  • CHEE 4703: Process Dynamics and Control
    CHEE4703:ProcessDynamicsandControlFall2024Lab3:RootLocusDiagramandControllerTuningProcessBackgroundConsiderablendingprocesswithtwoinletstreamsandasingle(overflow)outletstream.Theschematicdiagramoftheprocessisshownin......
  • 递推进阶与入门递归
    一、递推进阶,勇攀高峰昆虫繁殖题目描述科学家在热带森林中发现了一种特殊的昆虫,这种昆虫的繁殖能力很强。每对成虫过X个月产Y对卵,每对卵要过两个月长成成虫。假设每个成虫不死,第一个月只有一对成虫,且卵长成成虫后的第一个月不产卵(过X个月产卵),问过Z个月以后,共有成虫多少对......
  • 20222403 2024-2025-1 《网络与系统攻防技术》实验五实验报告
    1.实验内容(1)从www.besti.edu.cn、baidu.com、sina.com.cn中选择一个DNS域名进行查询,获取如下信息:DNS注册人及联系方式该域名对应IP地址IP地址注册人及联系方式IP地址所在国家、城市和具体地理位置PS:使用whois、dig、nslookup、traceroute、以及各类在线和离线工具进行搜集......
  • 大网进阶安全6
    第六章 服务访问质量1.QoS:服务质量2.RSVP:资源预留协议3.DSCP:差异化服务编码点4.PBR:策略路由5.CIR:承诺平均速率6.Bc:突发量7.Be:额外突发量8.GTS:流量整形9.CAR:承诺访问速率#####################1.网络现状:   延迟、延迟抖动、丢包2.使用QoS的目的(作用):***区......
  • 大网进阶安全5
    第五章 IPv6与VoIP1. IANA:互联网数字分配机构  ISP  :互联网服务提供商  FDDI:光纤分布式接口  ATM:异步传输模式  CIDR:无类别域间路由2.为什么要使用和研究IPv6?(IPv4的不足)①地址危机②QoS(服务质量)和性能问题③配置复杂④安全问题⑤骨干路由表膨胀......
  • 计算机毕业设计必看必学03361springboot开放实验室管理系统原创定制程序,java、PHP、p
    springboot开放实验室管理系统摘要随着社会的发展,社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。本文以实际运用为开发背景,运用软件工程原理和开发方法,它主要是使用动态网页开发技术java作为系统的开发语言,MySQL作为后台数据......
  • mysql查询进阶
    把查询出来的值插入到原表中使用insertinto表2select*from表1;(表1是复制体,表2是粘粘体)前提条件是表1和表2的列和类型必须是一样的 聚合查询count(*),计算有多少行针对行和行进行运算,使用selectcount(*)from表名;(也可以写列名,写列名的话当我们的列里面是值为null时是......