ThreeJs-04详解材质与纹理
一.matcap材质这个材质不会受到光照影响，但是如果图片本身有光就可以一直渲染这个图片本来的样子，用来将一个图片纹理渲染到物体上的材质
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094601899-411123292.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094601308-892099944.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094600744-1999221032.png
代码实现
加载模型后，开启纹理渲染，并把它的材质变为这个材质，并且贴上纹理图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094600281-35537824.png
二.Lambert材质
Lambert网格材质是Three.js中最基本和常用的材质之一。本文将详细介绍Lambert网格材质的定义、特点、应用以及使用方法。
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094559789-433490733.png
简单来说就是这个材质当你设置好各种贴图之后 实现凹凸不平地面等是比较好的
设置好Lambert材质后，打一个光进来，会发现是漫反射哑光的反射类似于
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094559304-825566367.png
三.phong材质
PHONG材质是Three.js中常用的一种材质，它是一种基于Phong光照模型的材质，可以用于实现高光和阴影效果。Phong光照模型是一种基于漫反射、镜面反射和环境反射的光照模型，可以用于模拟真实物体的光照效果。
比如涂了漆面的木材，光滑的材质
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094558822-289576700.png
设置为phone材质，在设置高光颜色就可以形成对点光源的反射
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094558318-2026965132.png
设置好环境贴图后
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094557793-665478904.png
代码操作
创建光源，把一个平面设置成phone材质
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094557265-1829928254.png
添加环境贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094556812-316962809.png
光滑的反射就出来了
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094514200-1732080936.gif
1.实现玻璃水晶效果
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094548260-120185819.png
加载模型，设置环境光，把这个模型改为phone材质，并且设置两个折射率
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094547777-182859638.png
envmap是环境贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094547344-1077841934.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094546866-399606847.png
如果想要折射效果还需要把环境贴图改为折射球形，上下不一样注意
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094546380-646868763.png
当把上面的反射变为折射后，这里的反射率也变为了折射率
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094545951-297423189.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094540595-681556678.gif
四.基础材质详解
1.标准网格材质
在 Three.js 中，MeshBasicMaterial 是一个用于创建基本材质的类。它能够让您快速创建不需要光照效果的几何体，并且配置非常简单，可以使用颜色、透明度和纹理等属性来自定义材质。MeshBasicMaterial 在 Three.js 中非常重要，因为它是创建简单3D图形的常用材质之一，而且渲染速度很快，能够让您的应用程序保持流畅的交互体验。如果您想要创建更复杂的3D图形，了解 MeshBasicMaterial 是非常有用的，因为它是其他更复杂材质的基础。
注意：标准网格材质需要设定环境贴图
这里做一个记录，系统性的介绍一下各种贴图的作用，在之前的材质也有各种贴图，但是标准是最齐全的能够达到漫反射也能镜反射
加载一个剑的模型
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094534932-1288884130.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094534490-1070982480.png
先上环境贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094533962-207005599.png
粗糙度为1，漫反射
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094533246-1460085189.png
粗糙度为0，镜反射
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094532517-485791548.png
金属度为0
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094531754-2057431839.png
金属度为1
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094530912-957585648.png
还原默认，先贴上贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094530039-867283390.png
金属度贴图和金属度是一个相乘的关系，越大就越金属
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094529173-1874633881.png法线贴图实现凹凸不平的效果
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094528323-737227991.png
凹凸贴图同理，两个只能设置一个
置换贴图可以让顶点有一个起伏的效果，上面是看起来，这个是真起来
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094527379-1828538958.png
粗糙度贴图可以让其光滑
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094526488-13741561.png
注意：真实环境只需要导入进来就是这个样子，不需要一个一个贴图，只是有时候改可以了解
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094522535-1603053649.png
代码实现
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094525288-455185587.png
创建环境贴图，背景一定要添加
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094524927-596161492.png
2.物理网格材质
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094524501-857566313.png
物理材质就是能够在刚才标准材质的基础上新增更多的功能
透光率
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094523952-470698251.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094523486-1062566932.png
当粗糙度为0，很光滑的时候就完全透明了
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094522980-963687660.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094522535-1603053649.png厚度
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094522098-1937942808.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094521542-54559139.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094521065-1851283277.png
折射率，反射率
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094520631-1672060892.png
衰减颜色，距离
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094520210-704658688.png
衰减距离越小，就越快到达衰减颜色
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094519802-1243961689.png
偏红色
注意：衰减颜色最好都设置1以下不要整的
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094519405-814814669.png
厚度贴图
呈现一个不均匀的厚度
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094519020-1633755028.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094518567-819472881.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094514200-1732080936.gif
清漆效果与清漆透明度
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094509793-123698727.png
单纯设置一个清漆强度为1后
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094505533-1815826269.gif
清漆光滑度，1漫反射，0镜反射
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094500969-1334003694.png
map就是通过纹理决定哪些地方要清漆哪些地方不要
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094500568-291658711.png
中间光滑，周围不清漆
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094500139-1518233982.png
注意此时应该粗糙度为1，到时候纹理会乘以粗糙度，如果为0始终 都是光滑
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094459720-1048150970.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094459265-1944159966.png
法线贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094458810-1081951435.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094458338-397954874.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094457976-1243646215.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094457527-2086624321.png
3. 布料织物材料光泽效果
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094456932-204029490.png
创建一个物理材质球体
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094456512-1185103406.png
设置光泽及颜色后
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094456077-1968705420.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094455655-1333598158.png
光泽粗糙程度
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094455241-548533255.png
设置纹理贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094454839-2044386764.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094454421-1799737973.png
4.肥皂泡、油滴、蝴蝶翅膀等薄膜的虹彩效应
反射出各种颜色的材质
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094453865-80137607.png
这种效果实际是有两层组成，外面一层负责反射折射
创建一个基本球体，有粗糙度，透明度，还有一层厚度
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094453368-760984029.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094452925-1276041958.png
设置彩虹色，反射率和彩虹色折射率
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094452522-1434487080.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094450939-1545730675.gif
薄膜厚度范围
默认
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094448608-1952544864.png
设置薄膜厚度贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094448091-1085072133.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094447602-200103927.png
5.清除物体_几何体_材质_纹理保证性能和内存不泄漏
比如这里不断创建一个随机材质，随机几何体的物体，不断回调自身
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094447074-397125154.png
此时cpu使用率和内存大小都在不断增加，到一定程度就会网页崩溃
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094446099-311735440.gif
要优化这种情况就是
每一帧渲染完毕，render.render就是渲染的语句，就去清除掉物体几何体等
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094444476-521116930.png
6.巧用物理发光属性打造逼真IPHONE产品
在很多建模软件直接导出来给到3D导入会发现有些属性发光等会缺失，这是因为两者有些内容并不兼用，所以这个时候通常是加载到three的编辑器里面，进行编辑之后，满意之后再导出到three里面进行模型加载
刚加载进来
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094444058-1824270211.png
找到屏幕材质，设置好之后导出
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094443647-1336987083.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094443183-247658120.png
加载进来就行了
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094442830-365542022.png
7.修改模型光泽效果打造逼真室内场景
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094442296-1873714725.png
刚导入进来
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094441486-992383752.png
设置光泽光泽颜色
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094440743-2090354922.png
毛绒效果，法线贴图
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094439920-2037645504.png
控制角度
如果让用户随意去转动很容易穿帮
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094439062-100150204.png
首先设置起始位置
可以添加轨道控制器来辅助查看
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094438556-69820857.png
设置相机初始位置，以及一开始看向的角度，x轴是横向看多宽，y是看多高，要设置lookat一开始看的角度还得配合控制器
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094438143-545493169.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094437804-519230177.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094437328-343938241.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094436699-356610100.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094436221-527443795.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094435806-660094019.png
!(F:\前端\阶段十二 threeJS\04-光照与阴影\ThreeJs-04详解材质与纹理.assets\undefined202411291626561.gif)
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094406660-969225228.png
垂直的最小角度是网上旋转，最大角度是往下旋转
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094406230-190990096.png
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094401319-1242263892.gif
水平左右的角度
https://img2023.cnblogs.com/blog/2680817/202501/2680817-20250124094356104-1551492233.png
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]