ThreeJs-03材质进阶

news/2024/11/29 4:01:15/文章来源:https://www.cnblogs.com/heymar/p/18568918

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/841072.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超参数调整、Batch归一化和程序框架

超参数调整、Batch归一化和程序框架 超参数调整在深度学习中,有许多超参数需要调整,不同超参数的重要性有所不同,可分为以下优先级: 第一优先级是学习率 \(\alpha\) 。 第二优先级是动量梯度下降参数 \(\beta\) ,隐藏层神经元数量,以及mini-batch大小。 第三个优先级是隐…

数据采集与融合技术实践作业4

102202143 梁锦盛 1.东方财富网信息爬取 使用Selenium框架+ MySQL数据库存储技术路线爬取“沪深A股”、“上证A股”、“深证A股”3个板块的股票数据信息。 一、作业代码与展示 1.编写代码文件 from selenium import webdriver from selenium.webdriver.common.by import By …

工程管理如何优化?2024年8款进度管理系统分享

本文盘点了8款主流工程项目管理工具:1.Worktile;2.泛普软件;3.子筑云;4.蓝凌;5.智建云;6.Wrike;7.Smartsheet;8.用友U8。工程进度管理系统是确保工程项目按计划顺利进行的关键工具。这类系统通过提供任务调度、资源分配、进度跟踪和实时通讯等功能,帮助项目经理和团队…

Docling:一个用于文档解析和格式转换的 IBM 开源工具

日常接触到的文档格式越发的多,pdf、doc、ppt、html等等,有没有一种方式可以将其转化为统一的格式呢?比如转为markdown或者json格式。 今天推荐一个IBM开源的工具,它可以满足你的需求,它是用python开发的。 下面为具体介绍内容: 项目简介 Docling是一个用于文档解析和格式…

Vulnhub Tr0ll

0x01:端口扫描 主机发现 nmap -sn 192.168.231.0/24IP地址为192.168.231.137 全端口扫描 nmap --min-rate 10000 -p- 192.168.231.137开放了21ftp,22ssh,80http UDP扫描 nmap -sU --min-rate 10000 -p- 192.168.231.137无UDP端口开放 接下来进行详细端口扫描 nmap -sT -sC -…

裁员了,很严重,大家做好准备吧!

在实际工作中,测试人需要解决的是具体的技术问题,而不仅仅是理论知识。为了全面评估候选人的能力,确保招聘到真正适合公司的人才。📝 博主首页 : 「码上生花」 ,同名公众号 :「伤心的辣条」📝 面试求职: 「面试试题小程序」 ,内容涵盖 测试基础、Linux操作系统、MyS…

IDEA如何快速地重写方法,如equals、toString等

前言 大家好,我是小徐啊。我们在使用IDEA的时候,有时候是需要重写equals和toString等方法的。这在IDEA中已经很方便的给我们准备好了快速的操作了。今天就来讲解一下。 如何重写 首先,打开要重写方法的文件,让鼠标定位到这个文件。然后,点击上方的代码,再点击重写方法这个…

高级语言程序设计课程第九次个人作业

班级:https://edu.cnblogs.com/campus/fzu/2024C 作业要求:https://edu.cnblogs.com/campus/fzu/2024C/homework/13311 学号:102400203 姓名:黄奕 14.17 3.这里定义月份名和其缩写时忘记定义长度,在第五问的时候系统报错才发现,更改在第五问float类型对应%f,我对应成%lf…

分布式一致性算法Raft

Raft算法在了解Raft之前,我们先了解一致性(Consensus)这个概念,它是指多个服务器在状态达成一致,但是在一个分布式系统中,因为各种意外可能,有的服务器可能会崩溃或变得不可靠,它就不能和其他服务器达成一致状态。这样就需要一种Consensus协议,一致性协议是为了确保容…

LeetCode24 两两交换链表中的节点

两两交换链表中的节点LeetCode24 两两交换链表中的节点 题目链接:LeetCode24 描述 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。示例输入:head = [1,2,3,4] 输出:[2,1,4,3]思路代码 class Solution {public ListNode swapPairs(ListNode head) {ListNo…

51单片机入门:LED灯控制(01)

第一篇博客,博客园注册很久却一直没有好好利用,今天把以前的文章都删掉,就当开个好头吧。 希望在以后的时间中,自己能够认真、努力、珍惜时间。 零基础入门51单片机 单片机(Microcontroller Unit,MCU)是一种集成电路芯片,它将计算机的CPU、存储器(RAM和ROM)、输入/输…

解读Graph+AI白皮书:LLM浪潮下,Graph尚有何为?

蚂蚁&之江实验室牵头的《Graph+AI:大模型浪潮下的图计算》白皮书发布,详细探讨了图计算与人工智能技术的融合发展,涵盖数据处理、算法创新、应用实践及未来挑战,强调图技术在提升模型解释性和处理复杂关系数据方面的重要性。历时半年,由蚂蚁集团和之江实验室牵头,联合…