材质

材质的分类
- 1. MeshBasicMaterial 基础材质
- 2. MeshDepthMaterial 深度材料
- 3. MeshNormalMaterial 法向量材料
- 4. MeshLamberMaterial
- 5. MeshPhongMaterial
- 6. MeshStandardMaterial 标准材料
- 7. ShaderMaterial 着色器材料
- 8. LineBasicMaterial 基础线材质
- 9. LineDashedMaterial 虚线材质

材质的分类

【砖人专语】ThreeJS功能解读—材质

1. MeshBasicMaterial 基础材质

构造：

var basicMaterial = new THREE.MeshBasicMaterial ()

特点：简单的几何材料，不考虑光照的影响
属性（基础属性）：
color — 线条的十六进制颜色。缺省值为 0xffffff。
==map ===— 设置纹理贴图。缺省为null。
aoMap — 设置环境遮挡贴图（ao = ambient occlusion）。缺省为null。
aoMapIntensity — 设置环境遮挡贴图强度。缺省为1。
specularMap — 设置高光贴图。默认为null。
==alphaMap ==— 设置阿尔法贴图。默认为null。
==envMap ==— 设置环境贴图。默认为null。
combine — 设置组合操作。默认值为THREE.MultiplyOperation.
reflectivity — 设置反射率。默认值是 1.
refractionRatio — 设置折射率。默认值是 0.98.
fog — 定义材质颜色是否受全局雾设置的影响。默认是true。
shading — 定义着色类型。缺省为 THREE.SmoothShading。
wireframe — 渲染模型为线框。默认是false。
wireframeLinewidth — 线框线宽。默认是1。
wireframeLinecap — 定义线端的外观。默认值是 ‘round’.
wireframeLinejoin — 定义线连接节点的外观。默认值是 ‘round’.
vertexColors — 定义顶点如何着色。默认值是 THREE.NoColors.
skinning — 定义材料是否使用皮肤。默认值是false.
morphTargets — 定义材料是否使用 morphTargets。默认值是 false。
Eg:

component.material = new THREE.MeshBasicMaterial({color: [0.5,0.5,0.5],});

效果如下：

2. MeshDepthMaterial 深度材料

构造：

var depthMaterial = new THREE.MeshDepthMaterial()

特点：外观不是由光照和材质决定的，而是由物体到相机的距离决定的。
属性：
wireframe（显示线框） wireframeLinewidth（线框宽度）
Eg:

component.material = new THREE.MeshDepthMaterial({color: [0.5,0.5,0.5]});

效果如下：

3. MeshNormalMaterial 法向量材料

构造：

var normalMaterial = new THREE.MeshNormalMaterial()

特点：每个面的颜色是从该面向外指的法向量映射到RGB颜色上
属性：
wireframe（显示线框）wireframeLinewidth（线框宽度）
Shading：THREE.FlatShading 平面着色；THREE.SmoothShading 平滑着色
Eg:

component.material = new THREE.MeshNormalMaterial({color: [0.5,0.5,0.5]});

效果如下：

Notes:
可以通过THREE.ArrowHelper添加表示法向量的箭头

4. MeshLamberMaterial

构造：

var meshMaterial = new THREE.MeshLamberMaterial()

特点：适用于暗淡、不光亮表面，会对光源产生反应
属性：ambient（环境色），emissive（发射颜色）
Eg:

component.material = new THREE.MeshLambertMaterial({color: [0.5,0.5,0.5]});

效果如下：

5. MeshPhongMaterial

构造：

var meshMaterial = new.THREE.MeshPhongMaterial()

特点：光亮材质
属性：ambient（环境色），emissive（发射颜色），specular（高光颜色），shininess（高光亮度，默认30）
Eg:

component.material = new THREE.MeshPhongMaterial({color: [0.5,0.5,0.5],specular:[0.5,0.5,0.5],
});

效果如下：

Notes:
将specular属性设置成和材质color一样的颜色有类似金属的效果；将specular属性设置成灰色会有类似塑料的效果。

6. MeshStandardMaterial 标准材料

构造：

var meshMaterial = new.THREE.MeshStandardMaterial();

特点：基于物理的标准材料,在实践中，这提供了比MeshLambertMaterial或MeshPhongMaterial更准确和逼真的结果，代价是计算成本更高。
属性：

component.material = new THREE.MeshStandardMaterial({color: [0.5, 0.5, 0.5],metalness: 0.6 //  这种材料多少像金属一样。 非金属材料，如木材或石材，使用0.0，金属使用1.0。// 默认值为0.5。 0.0到1.0之间的值可用于生锈的金属外观。
});

效果如下：

7. ShaderMaterial 着色器材料

自定义的着色器渲染材料，使用GLSL语言编写可自定义着色器，直接在WebGL环境中运行。
属性：fragmentShader（传入像素的颜色）、vertexShader（传入顶点的位置）、uniform（向着色器发送信息）、defines（设置全局变量）、attributes（修改顶点和片段）、lights（光照）
Eg:

var material = new THREE.ShaderMaterial( {
uniforms: {
time: { value: 1.0 },
resolution: { value: new THREE.Vector2() } },attributes: { vertexOpacity: { value: [] } },vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent } );
//创建shaderMaterial

Notes：
RawShaderMaterial原始着色器材料，与ShaderMaterial类似，但内置的uniforms和attributes定义不会自动添加到GLSL着色器代码。

8. LineBasicMaterial 基础线材质

特点：用于THREE,Line的简单线性材质
属性：color（颜色）、linewidth（线宽）、Linecap（端点如何显示）、LineJoin（连接点如何显示）、vertexColors（顶点颜色）、fog（是否受雾化效果影响）
Eg:

var material = new THREE.LineBasicMaterial({opacity:1.0,linewidth:1,vertexColors: THREE.VertexColors});

9. LineDashedMaterial 虚线材质

属性：
scale（缩放比例）、dashSize（短划线的长度）、gapSize（间隔长度）
Eg:

Lines.computeLineDistance();   //显示间隔
Var material = new THREE.LineDashedMaterial({vertexColors: true,
Color: 0xffffff,
dashSize: 10,
gapSize: 1,
Scale: 0.1
});

Notes：
（1）若要创建透明材质，不仅要设置opacity的值，还要将transparent属性设为true；
（2）还有一些较为少见的材质，such as⬇
PointsMaterial：点材料，粒子系统所使用的缺省材质
SpriteMaterial: 精灵材料，使用Sprite的材料
MultiMaterial: 多种材料，使用faces materialindex来决定哪个面使用哪个材料

三维模型材质了解一下相关推荐

MAYA学习难吗？ MAYA前景如何？怎样才能更好的学好MAYA建模？
一 Maya找工作太难了,咋办呢? 首先我们要明确一个问题,不是Maya找工作难,而是我们自己的思维有点狭隘了,进行了一个自我框限,难道我们学的Maya,就必须做Maya这个工作吗?其实Maya只是一 ...
Qt Quick 3D系列（三）：设置三维模型的金属光泽材质
前面的博客中介绍了如何在Qt Quick 3D中加载三维模型,下面介绍如何设置三维模型的材质,例如下图模型: 我需要设置为金属材质时,设置该Model的materials为PrincipledMate ...
如何运用无代码化三维WebGL平台-雀羽三维平台trying3d-制作PBR物理材质效果三维模型
1.登录雀羽三维平台 www.trying3d.com 快速进入作品管理界面. 2.创建一个新作品. 3.进入作品创作界面,上传模型至私有化素材库,并加载至作品场景中. 4.选择相应的模型,开启PBR ...
WPF中对三维模型的控制
原文:WPF中对三维模型的控制 (以下选自南开大学出版社出版的<WPF和Silverlight教程>) 3Dmax中的建模模型可以导出为obj文件格式,将此文件导入WPF项目中,由WPF完 ...
threejs加载obj模型_倾斜摄影三维模型几种常见的格式，你能说出哪些？
本文首发于公众号Wish3D,原文链接:倾斜摄影三维模型几种常见的格式,你能说出哪些? 无人机航拍的影像经过建模软件处理产出之时,有很多成果的数据需要我们去选择输出,对于新手而言,如何选择数据格式呢? ...
maptalks+three.js+vue webpack项目实现二维地图上贴三维模型
我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_ 最终效果如图:(地图上添加一个"三维地图"的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框) 以下都在已 ...
Unity 3D 三维模型简介｜｜
Unity 3D 三维模型简介三维模型是用三维建模软件建造的立体模型,也是构成 Unity 3D 场景的基础元素. Unity 3D 几乎支持所有主流格式的三维模型,如 FBX 文件和 OBJ 文件 ...
3. Unity之三维模型
1. 网格 Mesh 三维物体模型在unity中一般称为mesh,即网格数据,模型一般使用专用的建模软件设计,将mesh文件导入到unity中进行使用,一般mesh中保存的是三维模型的面和顶点数据.在 ...
STK中卫星三维模型的建立
建立卫星三维模型是整个仿真系统中重要的组成部分.建立逼真的卫星三维模型对于提高系统仿真效果增强仿真的可信度起着极为关键的作用.然而由于卫星的形态差别很大,结构也比较复杂,并且有严格的尺寸要求,用STK ...

三维模型材质了解一下

材质

材质的分类

1. MeshBasicMaterial 基础材质

2. MeshDepthMaterial 深度材料

3. MeshNormalMaterial 法向量材料

4. MeshLamberMaterial

5. MeshPhongMaterial

6. MeshStandardMaterial 标准材料

7. ShaderMaterial 着色器材料

8. LineBasicMaterial 基础线材质

9. LineDashedMaterial 虚线材质

三维模型材质了解一下相关推荐

最新文章

热门文章