Three.js所有材质的属性及实例应用

所有材质：

名称	描述
MeshBasicMaterial（网格基础材质	基础材质，用于给几何体赋予一种简单的颜色，或者显示几何体的线框
MeshDepthMaterial（网格深度材质）	这个材质的使用从摄像机到网格的距离来决定如何给网格上色
MeshNormalMaterial（网格法向材质）	使用法向向量计算物体的表面颜色
MeshLambertMaterial（网格Lambert材质）	这是一种考虑光照影响的材质，用于创建暗淡，不光亮的物体
MeshPhongMaterial（网格Phong材质）	这是一种考虑光照影响的材质，用于创建光亮的物体
MeshStandardMaterial（网格标准材质）	这种标准材质采用“基于物理的渲染（PBR）”算法来绘制物体表面。能计算出表面与光线的正确互动关系，从而使渲染出来的物体更真实。
MeshPhysicalMaterial（网格物理材质）	这是MeshStandardMaterial（网格标准材质）的扩展材质，为光线反射计算模型提供了更多的控制
MeshToonMaterial（网格卡通材质）	这是MeshPhongMaterial（网格Phong材质）的扩展材质，使得物体渲染卡通化
ShadowMaterial（阴影材质）	专门用于接收用于阴影图的特殊材质。在该材质中只有阴影图像，非阴影部分为完全透明的区域
shaderMaterial（着色器材质）	允许使用自定义的着色器程序，直接控制顶点的放置位置和像素的着色方式
LineBasicMaterial（直线基础材质）	用于THREE.line（直线）几何体，用于创建着色的直线
LineDashMaterial（虚线材质）	这种材质和LineBasicMaterial（直线基础材质）一样，但是允许创建一种虚线的效果。

材质的共有属性

属性	描述
id（标识符）	用于识别材质，并在创建材质时赋值。从0开始往上增加
uuid（通用唯一识别符）	这是生成的唯一ID，在内部使用
name（名称）	可以通过这个属性赋予材质名称，用于调试的目的
opacity（不透明度）	定义物体的透明度。与transparent属性一起使用。该属性的赋值范围从0到1
transparent（是否透明）	如果设置为true，Three.js会使用指定的不透明度渲染物体，如果设置为false，这个物体就不透明。如果使用alpha（透明度）通道的纹理，这个值应该设置为true。
overdraw（过度描绘）	当使用THREE.CanvasRender时，多边形会被渲染的稍微大一点。当这个渲染器渲染的物体有间隙时，可以将这个属性设置为true。
visible（是否可见）	定义该材质是否可见。如果设置为false，该物体在场景中就不可见
side（侧面）	可以定义哪一面应用材质。默认值是THREE.FontSide（前面）。
needsUpdate（是否更新）	对于材质的某些修改，是否告诉THREE.js材质已经改变，如果设置为true，Three.js会使用新的材质属性更新它的缓存
colorWrite（是否输出颜色）	如果属性值设置为false，则具有该材质的物体不会被真正的绘制到场景中，实际效果是该物体本身是不可见的，但其他物体被它挡住的部分也不可见
flatShading（平面着色）	该属性控制物体表面法线的生成方式，从而影响光线效果。属性值为true时，在两个相邻但不共面的三角形之间，光照会因为生硬过度而产生棱角，为false时则会产生平滑的过度效果。
lights	该属性值为布尔值。控制物体表面是否接受光照。默认值为true
dithering（抖动）	该属性控制是否启用颜色抖动模式，在一定程度上可以减轻颜色不均的问题。默认值为false
shadowSide（投影面）	控制哪个面会投射阴影。默认值为null。当属性值为null时。投射阴影的面按照如下原则推定：当side为THREE.FrontSide时，side为后面；当side为THREE.BackSide时，side为前面;当side为THREE.DoubleSide时，side为前面双侧
vertexColors（顶点颜色）	可以为物体的每一个顶点指定特有的颜色。默认值是THREE.NoColors。如果设置属性值为THREE.VertexColors，则渲染时将使用THREE.Face3 vertexColors数组指定的颜色，为每一个顶点设定颜色。如果该属性值为THREE.FaceColors，则会使用每一个面自己的颜色属性来设定面的颜色。CanvasRenderer不支持该属性，但WebGLRenderer能够支持
fog（雾）	控制材质是否受雾的影响

融合属性

• 融合属性决定了我们渲染的颜色如何与它们后面的颜色交互

属性	描述
blending（融合）	该属性决定了物体上的材质如何与背景融合。一般的融合模式是THREE.NormalBlending，在这种模式下只显示材质的上层
blendSrc（融合源）	除了标准融合模式之外，还可以通过设置blendSrc、blendDst和blendEquation来创建自定义的融合模式。这个属性定义了物体（源）如何与背景（目标）相融合。默认值为THREE.SrcAlphaFactor，即使用alpha（透明度通道）进行融合。
blendSrcAlpha（融合源透明度）	该属性为blendSrc指定透明度，默认值为null
blendDst（融合目标）	定义了融合时如何使用背景（目标），默认值为THREE.OneMinusSrcAlphaFactor，其含义是目标也使用源的alpha通道进行融合，只是使用的值是1（源的alpha通道值）
blendDstAlpha（融合目标透明度）	该属性为blendDst指定透明度，默认值为null
blendEquation（融合公式）	定义如何使用不blendSrc和blendDst的值。默认值为使它们相加（AddEquation）。

THREE.MeshBasicMaterial

简介

1. 一种简单的材质，不考虑场景中光照的影响
2. 使用这种材质网格会被渲染成简单的平面多边形
3. 可以显示几何体的线框

属性

名称	描述
color（颜色）	设置材质的颜色
wireframe（线框）	设置这个属性可以将材质渲染成线框，适用于调试
wireframeLinewidth（线框线宽）	如果打开了wireframe，这个属性定义线框中线的宽度
wireframeLinecap（线框线段端点）	这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括butt（平）、round（圆）和square（方）。默认值是round。在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性。
wireframeLinejoin（线框线段连接点）	定义了线段连接点如何显示。可选的值有round（圆）、bevel（斜角）、miter（尖角）。默认值为round。WebGLRenderer对象不支持该属性。

实例应用

链接：https://blog.csdn.net/Potatoyou/article/details/127979023?spm=1001.2014.3001.5502

THREE.MeshDepthMaterial

简介

1. 这个材质使用摄像机到网格的距离来决定如何给网格上色
2. 可以将这种材质和其他材质结合，容易创建出逐渐消失的效果。
3. 这种材质只有两个控制线框显示的属性

属性

属性	描述
wireframe	该属性指定是否显示线框
wireframeLineWidth	该属性指定线框的宽度（这个属性支队THREE.CanvasRenderer有效）

实例应用

链接：MeshDepthMaterial

联合材质

简介

1. THREE.MeshDepthMaterial材质没有用来设置颜色的属性，一切都是由材质的默认属性决定
2. THREE.js库可以通过联合材质创建出可以拥有颜色，同时也是THREE.MeshDepthMaterial材质的物体
3. 如何联合材质？

//创建两种材质
var cubeMaterial = new THREE.MeshDepthMaterial();
//对于THREE.MeshBasicMaterial材质，需要设置transparent为true，并且指定一个融合模式
//如果transparent没有设置为true，只会出现纯绿色物体，因为three.js不会执行任何融合模式
var colorMaterial = new THREE.MeshBasicMaterial({
  color:0xffffff,
  transparent:true,
  //设置THREE.MeshBasicMaterial如何与背景（THREE.MeshDepthMaterial材质渲染的方块）互相作用
  //THREE.MultiplyBlending对象，这种融合模式会把前景色和背景色相乘
  blending:THREE.MultiplyBlending
});

var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry,[colorMaterial,cubeMaterial]);
cube.children[1].scale.set(0.99,0.99,0.99);

• 当调用THREE.SceneUtils.createMultiMaterialObject()方法创建一个网格时，几何体会被复制，返回一个网格组
• 如果没有最后一行，渲染的时候画面会有闪烁
• 通过缩小THREE.MeshDepthMaterial材质的网格，可以避免闪烁现象
• 这些方块从MeshDepthMaterial对象获得了亮度，从MeshBasicMaterial对象获得了颜色

实例应用

链接：联合材质

THREE.MeshNormalMaterial

简介

1. 使用法向向量计算物体的表面颜色
2. 法向量在three.js中可以用来决定光的反射，有助于将纹理映射到三维模型，并提供有关如何计算光照、阴影和为表面像素着色的信息

属性

属性	描述
wireframe	该属性指定是否显示线框
wireframeLineWidth	该属性指定线框的宽度（这个属性支队THREE.CanvasRenderer有效）

实例应用

链接：MeshNormalMaterial

在单几何体上使用多种材质

1. 如果有一个方块，有12个面（注意，three.js中只作用于三角形）。你可以用这种材质给方块的每个面指定一种材质（例如不同的颜色）

实例应用

链接：多种材质

THREE.MeshLambertMaterial

简介

1. 用来创建暗淡的并不光亮的表面
2. 该材质非常易用，而且会对场景中的光源产生反应
3. 支持线框绘制属性，可以绘制具有光照效果的线框物体
4. 效果看起来比较暗淡

属性

名称	描述
color（颜色）	这是材质的环境光
emissive（自发光）	材质自发光的颜色。该材质虽然不会让使用它的物体变成光源，但会使物体的颜色不受其他光源的影响（即使在场景中没有光源的暗处，该物体表面的emissive颜色也可见，从而实现物体自发光。）该属性的默认值为黑色。

创建

var meshLambertMaterial = new THREE.MeshLambertMaterial({color:0xffffff});

实例应用

链接：MeshLambertMaterial

THREE.MeshPhongMaterial

简介

1. 创建一种光亮的材质
2. 可以在物体表面实现高光效果
3. 可以模拟塑料质感，也可以模拟金属质
4. THREE.js还提供了一个THREE.MeshPhongMaterial材质的扩展材质：THREE.MeshToonMaterial

属性

名称	描述
color（颜色）	材质的环境色。与环境光源一起使用。这个颜色会与环境光提供的颜色相乘。默认值为白色
emissive（自发光颜色）	材质自发光的颜色。该材质虽然不会让使用它的物体变成光源，但会使物体的颜色不受其他光源的影响（即使在场景中没有光源的暗处，该物体表面的emissive颜色也可见，从而实现物体自发光。）该属性的默认值为黑色。
specular（高光颜色）	该属性指定该材质的光亮程度及高光部分颜色。如果将它设置成与color属性相同的颜色，将会得到一个类似金属的材质，如果将它设置成灰色（grey），材质将会变得像塑料
shiness（高光度）	该属性指定物体表面镜面高光部分的轮廓的清晰程度，越光滑的表面，高光部分越清晰，反之越模糊。该属性的默认值为30

创建

var meshPhongMaterial = new THREE.MeshPhongMaterial({color: 0xdddddd});

THREE.MeshStandardMaterial

简介

1. 这种材质使用更加正确的物理计算来决定物体表面如何与场景中的光源互动
2. 能够更好的表现塑料质感和金属质感的表面

属性

名称	描述
metalness（金属感程度）	该属性控制物体表面的金属感程度。0代表完全塑料质感，1代表完全金属质感。默认值为0.5
roughness（粗糙程度）	该属性控制物体表面的粗糙程度。在视觉上，它决定表面对入射光的漫反射程度。默认值0.5。当值为0时会产生类似镜面的反射，为1时会产生完全的漫反射效果

THREE.MeshPhysicalMaterial

简介

1. 该材质与THREE.MeshPhongMaterial材质非常相似
2. 提供了对反光度的更多控制
3. 该材质与上述MeshStandardMaterial材质，在不动手实验的情况下，很难确定什么样的参数值才能最符合特定需求。因此最佳的实践方法就是在程序里增加一个简单的UI，一边调节参数一边观察。

属性

名称	描述
clearCoat（清漆）	该属性控制物体表面清漆涂层效果的明显程度。该属性值越高，则清漆图层越厚，其结果是clearCoatRoughness属性带来的影响越明显。取值范围是0-1，默认值0
clearCoatRoughness（清漆粗糙程度）	该属性控制物体表面清漆涂层的粗糙程度。粗糙程度越高，漫反射越明显。该属性需要与clearCoat属性配合使用。取值范围0-1，默认值0
reflectivity（反光度）	该属性用于控制非金属表面的反光度，因此当metalness（金属感程度）为1或接近1时该属性的作用很小。取值范围时0-1，默认值0.5