32 Three.js的材质的种类和共有属性

种类

名称	描述
MeshBasicMaterial（网格基础材质）	基础材质，用于给几何体赋予一种简单的颜色，可以显示几何体的线框
MeshDepthMaterial（网格深度材质）	这个材质使用从摄像机到网格的距离来决定如何给网格上色
MeshNormalMaterial（网格法向材质）	这是一种简单的材质，根据法向向量计算物体表面的颜色
MeshFaceMaterial（网格面材质）	这是一个容器，可以为几何体的各个表面指定不同的材质
MeshLambertMaterial（网格Lambert材质）	这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体
MeshPhongMaterial（网格Phong材质）	这是一种考虑光照的材质，用于创建光亮的物体
ShaderMaterial（着色器材质）	这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式以及像素的着色方式
LineBasicMaterial（直线基础材质）	这种材质可以用于THREE.Line（直线）几何体，用来创建着色的直线
LineDashMaterial（虚线材质）	这种材质与LineBasicMaterial（直线基础材质）一样，但允许创建出一种虚线的效果

还有一些特殊的材质，以后在使用到的时候再介绍。

材质的共有属性

Three.js提供了一个材质基类THREE.Material，它列出了所有的共有属性。我们将这些共有属性分成了三类，如下所示：

• 基础属性：这些属性是最常用的。通过这些属性，可以控制物体的不透明度、是否可见以及如何被引用（通过id或是自定义名称）。
• 融合属性：每个物体都有一系列的融合属性。这些属性决定了物体如何与背景融合。
• 高级属性：有一些高级属性可以控制底层WebGL上下文对象渲染物体的方式。大多数情况下是不需要使用这些属性的。

基础属性

属性	描述
id（标识符）	用来识别材质，并在材质创建时赋值。第一个材质的值从0开始，每新加一个材质，这个值增加1
uuid（通用唯一识别码）	这是生成的唯一id，在内部使用
name（名称）	可以通过这个属性赋予材质名称，用于调试的目的
opacity（不透明度）	定义物体的透明度。与transparent属性一起使用。该属性的赋值范围从0到1
transparent（是否透明）	如果该值设置为true，Three.js会使用指定的不透明度渲染物体。如果设置为false，这个物体就不透明–只是着色更明亮些。如果使用alpha（透明度）通道的纹理，该属性应该设置为true。
overdraw（过渡描绘）	当你使用THREE.CanvasRender时，多边形会被渲染得稍微大一点。当使用这个渲染器渲染的物体有间隙时，可以将这个属性设置为true
visible（是否可见）	定义该材质是否可见。如果设置为false，那么在场景中就看不到该物体
side（侧面）	通过这个属性，可以定义几何体的哪一面应用材质。默认值为THREE.FrontSide（前面），这样可以将材质应用到物体的前面（外侧）。也可以将其设置为THREE.BackSide（后面），这样可以将材质应用到物体的后面（内侧）。或者也可以将它设置为THREE.DoubleSide（双侧），可将材质应用到物体的内外两侧
needsUpdate（是否更新）	对于材质的某些修改，你需要告诉Three.js材质已经改变了。如果设置为true，Three.js会使用新的材质属性更新它的缓存

融合属性

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

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

高级属性

名称	描述
depthTest	这是一个高级WebGL属性。使用这个属性可以打开或关闭GL_DEPTH_TEST参数。此参数控制是否使用像素深度来计算新像素的值。通常情况下不必修改这个属性。
depthWrite	这是另外一个内部属性。这个属性可以用来决定这个材质是否影响WebGL的深度缓存。如果你将一个物体用作二维贴图（例如一个套子），应该将这个属性设置为false。但是，通常不应该修改这个属性。
polygonOffset、polygonOffsetFactor和polygonOffsetUnits	通过这些属性，可以控制WebGL的POLYGON_OFFSET_FILL特性。
alphatest	可以给这个属性指定一个值（从0到1）。如果某个像素的alpha值小于该值，那么该像素不会显示出来。可以使用这个属性移除一些与透明相关的毛边

创建材质并修改属性的两种方法

• 可以在构造函数中通过参数对象的方式传入参数：

var material = new THREE.MeshBasicMaterial({
    color:0xff000,
    name:"material",
    opacity:0.5,
    transparent:true
});

• 或者，创建一个实例，然后分别设置相关属性

var material = new THREE.MeshBasicMaterial();
material.color = new THREE.Color(0xff000);
material.name = "material";
material.opacity = 0.5;
material.transparent = true;