ThreeJs-04详解材质与纹理

一.matcap材质

这个材质不会受到光照影响，但是如果图片本身有光就可以一直渲染这个图片本来的样子，用来将一个图片纹理渲染到物体上的材质

image-20241121203036600

image-2024112120314790

image-20241121203130183

代码实现

加载模型后，开启纹理渲染，并把它的材质变为这个材质，并且贴上纹理图

image-20241121203303922

二.Lambert材质

Lambert网格材质是Three.js中最基本和常用的材质之一。本文将详细介绍Lambert网格材质的定义、特点、应用以及使用方法。

image-20241121203350029

简单来说就是这个材质当你设置好各种贴图之后 实现凹凸不平地面等是比较好的

设置好Lambert材质后，打一个光进来，会发现是漫反射哑光的反射类似于

image-20241121204636638

三.phong材质

PHONG材质是Three.js中常用的一种材质，它是一种基于Phong光照模型的材质，可以用于实现高光和阴影效果。Phong光照模型是一种基于漫反射、镜面反射和环境反射的光照模型，可以用于模拟真实物体的光照效果。

比如涂了漆面的木材，光滑的材质

image-20241121205608593

设置为phone材质，在设置高光颜色就可以形成对点光源的反射

image-20241121205751928

设置好环境贴图后

image-2024112120583105

代码操作

创建光源，把一个平面设置成phone材质

image-20241121210053452

添加环境贴图

image-20241121210317472

光滑的反射就出来了

GIF

1.实现玻璃水晶效果

image-20241121210637829

加载模型，设置环境光，把这个模型改为phone材质，并且设置两个折射率

image-20241121211041274

envmap是环境贴图

image-20241121211105343

image-20241121211116253

如果想要折射效果还需要把环境贴图改为折射球形，上下不一样注意

image-20241121211244469

当把上面的反射变为折射后，这里的反射率也变为了折射率

image-20241121211339694

GIF

四.基础材质详解

1.标准网格材质

在 Three.js 中，MeshBasicMaterial 是一个用于创建基本材质的类。它能够让您快速创建不需要光照效果的几何体，并且配置非常简单，可以使用颜色、透明度和纹理等属性来自定义材质。MeshBasicMaterial 在 Three.js 中非常重要，因为它是创建简单3D图形的常用材质之一，而且渲染速度很快，能够让您的应用程序保持流畅的交互体验。如果您想要创建更复杂的3D图形，了解 MeshBasicMaterial 是非常有用的，因为它是其他更复杂材质的基础。

注意：标准网格材质需要设定环境贴图

这里做一个记录，系统性的介绍一下各种贴图的作用，在之前的材质也有各种贴图，但是标准是最齐全的能够达到漫反射也能镜反射

加载一个剑的模型

image-20241121212931300

image-20241121212959222

先上环境贴图

image-20241121213022720

粗糙度为1，漫反射

image-20241121213104366

粗糙度为0，镜反射

image-20241121213122418

金属度为0

image-20241121213134760

金属度为1

image-20241121213145115

还原默认，先贴上贴图

image-20241121213227685

金属度贴图和金属度是一个相乘的关系，越大就越金属

image-2024112121332269法线贴图实现凹凸不平的效果

image-20241121213350159

凹凸贴图同理，两个只能设置一个

置换贴图可以让顶点有一个起伏的效果，上面是看起来，这个是真起来

image-20241121213508952

粗糙度贴图可以让其光滑

image-20241121213603671

注意：真实环境只需要导入进来就是这个样子，不需要一个一个贴图，只是有时候改可以了解

image-20241121213659463

代码实现

image-20241121214628508

创建环境贴图，背景一定要添加

image-20241121220437668

2.物理网格材质

image-202411212116590

物理材质就是能够在刚才标准材质的基础上新增更多的功能

透光率

image-20241122204625828

image-20241122204733564

当粗糙度为0，很光滑的时候就完全透明了

image-20241122204804798

image-2024112220481002厚度

image-20241122204820807

image-20241122204844113

image-20241122204905093

折射率，反射率

image-20241122204934596

衰减颜色，距离

image-20241122205004480

衰减距离越小，就越快到达衰减颜色

image-20241122205157040

偏红色

注意：衰减颜色最好都设置1以下不要整的

image-20241122205222422

厚度贴图

呈现一个不均匀的厚度

image-20241122205424614

image-20241122205451174

GIF

清漆效果与清漆透明度

image-20241122205759196

单纯设置一个清漆强度为1后

GIF

清漆光滑度，1漫反射，0镜反射

image-20241122205955389

map就是通过纹理决定哪些地方要清漆哪些地方不要

image-20241122211724856

中间光滑，周围不清漆

image-20241122211758974

注意此时应该粗糙度为1，到时候纹理会乘以粗糙度，如果为0始终 都是光滑

image-20241122211904061

image-2024112221191452

法线贴图

image-20241122211946090

image-20241122212038525

image-20241122212051464

image-20241122212020950

3. 布料织物材料光泽效果

image-20241122212504250

创建一个物理材质球体

image-2024112221310557

设置光泽及颜色后

image-20241122213125629

image-20241122213133129

光泽粗糙程度

image-20241122213159760

设置纹理贴图

image-20241122213308545

image-20241122213313943

4.肥皂泡、油滴、蝴蝶翅膀等薄膜的虹彩效应

反射出各种颜色的材质

image-20241122213453225

这种效果实际是有两层组成，外面一层负责反射折射

创建一个基本球体，有粗糙度，透明度，还有一层厚度

image-20241122214131627

image-20241122214150959

设置彩虹色，反射率和彩虹色折射率

image-20241122214426056

GIF

薄膜厚度范围

默认

image-20241122214542012

设置薄膜厚度贴图

image-20241122214626750

image-2024112221461734

5.清除物体_几何体_材质_纹理保证性能和内存不泄漏

比如这里不断创建一个随机材质，随机几何体的物体，不断回调自身

image-20241122215953044

此时cpu使用率和内存大小都在不断增加，到一定程度就会网页崩溃

GIF

要优化这种情况就是

每一帧渲染完毕，render.render就是渲染的语句，就去清除掉物体几何体等

image-20241122220154401

6.巧用物理发光属性打造逼真IPHONE产品

在很多建模软件直接导出来给到3D导入会发现有些属性发光等会缺失，这是因为两者有些内容并不兼用，所以这个时候通常是加载到three的编辑器里面，进行编辑之后，满意之后再导出到three里面进行模型加载

刚加载进来

image-20241122221251880

找到屏幕材质，设置好之后导出

image-20241122222931053

image-20241122222937759

加载进来就行了

image-20241122223013122

7.修改模型光泽效果打造逼真室内场景

image-20241122223145966

刚导入进来

image-20241122223537547

设置光泽光泽颜色

image-20241122223739589

毛绒效果，法线贴图

image-20241122224209173

控制角度

如果让用户随意去转动很容易穿帮

image-20241122224856196

首先设置起始位置

可以添加轨道控制器来辅助查看

image-20241122225650253

设置相机初始位置，以及一开始看向的角度，x轴是横向看多宽，y是看多高，要设置lookat一开始看的角度还得配合控制器

image-20241122225756210

image-20241122225836884

image-20241122225823919

image-20241122225912473

image-20241122225928130

image-20241122230031381

GIF

image-20241122230117022

垂直的最小角度是网上旋转，最大角度是往下旋转

image-20241122230255085

GIF

水平左右的角度

image-20241122230404132

posted @ 2024-11-29 16:27  Heymar-10  阅读(99)  评论(0)  编辑  收藏  举报