ThreeJs-04详解材质与纹理

  • ThreeJs-04详解材质与纹理已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

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


一.matcap材质

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

代码实现

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

ThreeJs-04详解材质与纹理

二.Lambert材质

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

ThreeJs-04详解材质与纹理

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

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

ThreeJs-04详解材质与纹理

三.phong材质

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

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

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

设置好环境贴图后

ThreeJs-04详解材质与纹理

代码操作

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

ThreeJs-04详解材质与纹理

添加环境贴图

ThreeJs-04详解材质与纹理

光滑的反射就出来了

ThreeJs-04详解材质与纹理

1.实现玻璃水晶效果

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

envmap是环境贴图

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

四.基础材质详解

1.标准网格材质

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

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

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

加载一个剑的模型

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

先上环境贴图

ThreeJs-04详解材质与纹理

粗糙度为1,漫反射

ThreeJs-04详解材质与纹理

粗糙度为0,镜反射

ThreeJs-04详解材质与纹理

金属度为0

ThreeJs-04详解材质与纹理

金属度为1

ThreeJs-04详解材质与纹理

还原默认,先贴上贴图

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理法线贴图实现凹凸不平的效果

ThreeJs-04详解材质与纹理

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

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

ThreeJs-04详解材质与纹理

粗糙度贴图可以让其光滑

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

代码实现

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

2.物理网格材质

ThreeJs-04详解材质与纹理

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

透光率

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理厚度

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

折射率,反射率

ThreeJs-04详解材质与纹理

衰减颜色,距离

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

偏红色

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

ThreeJs-04详解材质与纹理

厚度贴图

呈现一个不均匀的厚度

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

清漆效果与清漆透明度

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

中间光滑,周围不清漆

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

法线贴图

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

创建一个物理材质球体

ThreeJs-04详解材质与纹理

设置光泽及颜色后

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

光泽粗糙程度

ThreeJs-04详解材质与纹理

设置纹理贴图

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

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

反射出各种颜色的材质

ThreeJs-04详解材质与纹理

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

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

薄膜厚度范围

默认

ThreeJs-04详解材质与纹理

设置薄膜厚度贴图

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

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

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

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

要优化这种情况就是

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

ThreeJs-04详解材质与纹理

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

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

刚加载进来

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

加载进来就行了

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

刚导入进来

ThreeJs-04详解材质与纹理

设置光泽光泽颜色

ThreeJs-04详解材质与纹理

毛绒效果,法线贴图

ThreeJs-04详解材质与纹理

控制角度

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

ThreeJs-04详解材质与纹理

首先设置起始位置

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

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

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

ThreeJs-04详解材质与纹理

ThreeJs-04详解材质与纹理

水平左右的角度

ThreeJs-04详解材质与纹理