ThreeJs-04详解材质与纹理

news/2024/11/27 23:24:25/文章来源:https://www.cnblogs.com/heymar/p/18573314

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

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

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

相关文章

Java学习笔记——2024.11.27

2024.11.27 一、字符类型 1.字符类型初探可以存放一个汉字(2字节)或者数字(这个c4存储的应该是ASCII编码为97的字符,也就是a)2.字符类型细节public class Chardetial {public static void main(String[] args) {char c1 = 97;System.out.println(c1); // achar c2 = a;System.…

JDBC API

1.DriverManager 1》注册驱动,mysql8以上版本可省 2》连接数据库 2.Connection 1》获取执行sql对象 2》管理事务(统一失败)3.Statement 1》执行sql语句4.ResultSet创建集合 List accounts = new ArrayList<类名>();accounts为集合名 往集合中添加类 accounts.add(类名…

linux模拟HID USB设备及wireshark USB抓包配置

目录1. 内核配置2. 设备配置附 wireshark USB抓包配置 linux下模拟USB HID设备的简单记录,其他USB设备类似。 1. 内核配置 内核启用USB Gadget,使用fs配置usb device信息。 Device Drivers ---> [*] USB support ---><*> USB Gadget Support ---><*…

2024御网杯信息安全大赛个人赛wp_2024-11-27

MISC题解 题目附件以及工具链接: 通过网盘分享的文件:御网杯附件 链接: https://pan.baidu.com/s/1LNA6Xz6eZodSV0Io9jGSZg 提取码: jay1 --来自百度网盘超级会员v1的分享一.信息安全大赛的通知 Ctrl+A发现存在隐写:选中中间空白那一部分,把文字变成红色,得出flag二、编码…

设计模式--原型模式及其编程思想

原型模式(Prototype Pattern) 原型模式的核心思想是通过复制(克隆)现有对象来创建新对象。 原型模式通常涉及两个角色:原型对象和具体原型对象。原型对象是需要被复制的对象,而具体原型对象是实现了克隆方法的原型对象。 在Java中,原型模式通常通过实现Cloneable接口和重…

JS-DOM与BOM

DOM DOM(Document Object Model) 文档对象模型是W3C组织制定并推荐的标准, 这个标准提供了一系列操作HTML的统一API(Application Programming Interface) 核心对象是document 浏览器的工作流程浏览器读取HTML文件 在内存中生成DOM树 调用API渲染显示DOM树 DOM树 是将HTML文档映…

C语言中对文件的输入输出

在c中的文件操作 通过读的形式,打开文件用FILE打开 用FILE*类型的指针接受文件指针的首地址 并且我们可以用读或写的方式打开文件 使用r来读取文件当然也要判断是否读取文件成功,若读取成功fopen会传出指针,若失败则会传出空指针,所以要判断读取是否成功 当然,当文件不存在…

linux内核参数

1.查看所有内核参数 grubby --info=ALL2.查看内核参数应没应用,生没生效 cat /proc/cmdline3. /etc/default/grub 里 GRUB_CMDLINE_LINUX 的值

『模拟赛』NOIP2024加赛8

『模拟赛记录』NOIP2024加赛8Rank 唐A. flandre 签。 比较显然,由于 \(k\ge 0\),所以最终的序列一定为不降序列。首先将原序列升序排序,当任取一个子序列时,容易发现最后一个数越大一定越优,那么最后一个数取到最大值时,倒数第二个数一定越大越优,以此类推,最终取出的序…

manim边做边学--圆柱体

Cylinder是Manim中用于创建圆柱体对象的类。 Cylinder类在制作数学、物理或工程领域的动画时,可用于以下的场景中:演示几何概念:使用Cylinder类创建圆柱体,并通过改变其参数和方法来演示圆柱体的各种几何性质,如体积、表面积等。 模拟物理现象:使用Cylinder类来模拟圆柱体…

基于Java+SpringBoot+Mysql在线简单拍卖竞价拍卖竞拍系统功能设计与实现十一

运行环境:windows/Linux均可、jdk1.8、mysql5.7、redis3.0、idea/eclipse均可。 技术点:SpringBoot+SpringDataJPA+Mysql+Freemaker+Bootstrap+JS+CSS+HTML 部分功能:前台竞价商品信息控制器Controller(商品列表、商品详情、报名、拍价、查看报名记录等 )一、前言介绍: 免…

Docker 实战:搭建本地 Registry 私有镜像仓库及批量导入脚本

前言:在我之前的博客中,我分享了 Harbor 仓库搭建的详细操作步骤。然而,在实际的生产环境中,并非每个 Docker 环境都需要部署一个规模庞大的 Harbor 仓库。有时,一个轻量级的本地 Registry 私有镜像仓库会更为便捷。本文将介绍如何搭建一个本地 Registry 私有镜像仓库,并…