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

ThreeJs-03材质进阶

时间:2024-11-28 21:45:18浏览次数:8  
标签: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/18574171

相关文章

  • 15Java集合进阶(异常、集合)
    一、异常1.1认识异常接下来,我们学习一下异常,学习异常有利于我们处理程序中可能出现的问题。我先带着同学们认识一下,什么是异常?我们阅读下面的代码,通过这段代码来认识异常。我们调用一个方法时,经常一部小心就出异常了,然后在控制台打印一些异常信息。其实打印的这些异常信息......
  • 16Java集合进阶(Set、Map集合、可变参数、斗地主案例)
    请先看我上篇文章15Java集合进阶(异常、集合)-CSDN博客一、Set系列集合1.1认识Set集合的特点Set集合是属于Collection体系下的另一个分支,它的特点如下图所示下面我们用代码简单演示一下,每一种Set集合的特点。//Set<Integer>set=newHashSet<>(); //无序、无索引、不重......
  • MeIoN's XCPC Library - ICPC2024 - Kunming
    MeIoN'sXCPCLibrary-ICPC2024-Kunming目录MeIoN'sXCPCLibrary-ICPC2024-Kunming目录Z_HMeIoN_H.hppMeIoN_IO.hppMeIoN_PRET.hppMeIoN_debug.hppfast_io.hppdsLinearBasis.hppWavelet_Matrix.hppbit_vec.hppchothlly.hppdsu.hppfenw......
  • 1103 欧拉函数
    //1103欧拉函数.cpp:此文件包含"main"函数。程序执行将在此处开始并结束。///*http://oj.daimayuan.top/course/22/problem/489输入T,一共T组数据,每组一个数n,输出它的欧拉函数φ(n)。输入格式第一行一个数字T。接下来T行,每行一个数字n。输出格式一共T行,每行一......
  • 「杂题乱刷2」CF2038B
    题目链接CF2038BMakeItEqual题意简述这东西好久没写了啊。阿瓦在一个幻想王国里。他走在草坪上,发现有\(n\)个数字精灵祝他生日快乐。阿瓦非常开心。因为最多可能会有\(2\times10^5\)个精灵为他庆生。但是,对于每个数字精灵都有一个饱食度\(a_i\),如果有任意两个数......
  • ssm基于Spring MVC框架的在线电影评价系统(10305)
     有需要的同学,源代码和配套文档领取,加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码(前后端源代码+SQL脚本)配套文档(LW+PPT+开题报告)远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项......
  • 电力IEC103/2/1/4规约数据采集仪器网关通讯管理机测试软件工具客户端服务器 LFP/NZ94/
      www.daq-iot.com 作为物联网数据采集解决方案专业提供商,数采物联网小编daq-iot在这里做以下内容介绍,并诚挚的欢迎大家讨论和交流。IEC103规约支持:工具完全适用于电力行业的各种通信测试采集需求。串口和以太网通信:工具支持通过串口和以太网进行通信,灵活适应不同的......
  • Outlook客户端登录世纪互联版邮箱提示“此用户名可能不正确”,或者显示错误代码CAAC03E
    故障现象使用Outlook客户端登录世纪互联版邮箱时,有时候会提示此用户名可能不正确。请确保键入的用户名正确无误。否则,请联系管理员。或者是提示错误代码CAAC03ED问题原因猜测是世纪互联版邮箱和MicrosoftEntra设备注册之间的bug解决方法方法①关掉outlook重新登录......
  • STM32 实现流水灯(基于 STM32F103C6T6 + HAL 库)
    一、硬件准备1.STM32F103C6T6A+STLink仿真器2.LED3只3.杜邦线若干(20条以内)4.面包板一块5.立式微动开关2只二、线路连接1.STM32核心板PA4PA5PA6分别接三只LED2.PB5PB6分别接两个开关一端3.保证所有开关、LED负极与核心板共地三、端口配置1.P......
  • Vulkan进阶系列02 - GPU Rendering and Multi-Draw Indirect
    一:概述       GPU渲染与多重间接绘制(GPURenderingandMulti-DrawIndirect),本文介绍了一种通过将绘制调用生成和视锥剔除的处理过程转移到GPU上,从而有效减少CPU使用率的技术方案。二:DrawCall的生成        渲染大型场景的常见方法是遍历每个模型,并在每......