今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关, 因此,如果您决定使用不同的渲染器,不必重写材质。
1. three.js材质基类
所有其他材质类型都继承了Material。
下面是一些属性:
.alphaTest : Float
设置运行alphaTest时要使用的alpha值。如果不透明度低于此值,则不会渲染材质。默认值为0。
.blendDst : Integer
混合目标。默认值为OneMinusSrcAlphaFactor。 目标因子所有可能的取值请参阅constants。 必须将材质的blending设置为CustomBlending才能生效。
.blendDstAlpha : Integer
.blendDst的透明度。 默认值为 null.
.blendEquation : Integer
使用混合时所采用的混合方程式。默认值为AddEquation。 混合方程式所有可能的取值请参阅constants。 必须将材质的blending设置为CustomBlending才能生效。
.blendEquationAlpha : Integer
.blendEquation 的透明度. 默认值为 null.
.blending : Blending
在使用此材质显示对象时要使用何种混合。
必须将其设置为CustomBlending才能使用自定义blendSrc, blendDst 或者 page:Constant blendEquation。 混合模式所有可能的取值请参阅constants。默认值为NormalBlending。
.blendSrc : Integer
混合源。默认值为SrcAlphaFactor。 源因子所有可能的取值请参阅constants。
必须将材质的blending设置为CustomBlending才能生效。
.blendSrcAlpha : Integer
.blendSrc的透明度。 默认值为 null.
.clipIntersection : Boolean
更改剪裁平面的行为,以便仅剪切其交叉点,而不是它们的并集。默认值为 false。
.clippingPlanes : Array
用户定义的剪裁平面,在世界空间中指定为THREE.Plane对象。这些平面适用于所有使用此材质的对象。空间中与平面的有符号距离为负的点被剪裁(未渲染)。 这需要WebGLRenderer.localClippingEnabled为true。 示例请参阅WebGL / clipping /intersection。默认值为 null。
.clipShadows : Boolean
定义是否根据此材质上指定的剪裁平面剪切阴影。默认值为 false。
.colorWrite : Boolean
是否渲染材质的颜色。 这可以与网格的renderOrder属性结合使用,以创建遮挡其他对象的不可见对象。默认值为true。
.defines : Object
注入shader的自定义对象。 以键值对形式的对象传递,{ MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }。 这些键值对在顶点和片元着色器中定义。默认值为undefined。
.depthFunc : Integer
使用何种深度函数。默认为LessEqualDepth。 深度模式所有可能的取值请查阅constants。
.depthTest : Boolean
是否在渲染此材质时启用深度测试。默认为 true。
.depthWrite : Boolean
渲染此材质是否对深度缓冲区有任何影响。默认为true。
在绘制2D叠加时,将多个事物分层在一起而不创建z-index时,禁用深度写入会很有用。
.flatShading : Boolean
定义材质是否使用平面着色进行渲染。默认值为false。
.fog : Boolean
材质是否受雾影响。默认为true。
.id : Integer
此材质实例的唯一编号。
.isMaterial : Boolean
用于检查此类或派生类是否为材质。默认值为 true。
因为其通常用在内部优化,所以不应该更改该属性值。
.lights : Boolean
材质是否受到光照的影响。默认为true。
.name : String
对象的可选名称(不必是唯一的)。默认值为空字符串。
.needsUpdate : Boolean
指定需要重新编译材质。
实例化新材质时,此属性自动设置为true。
.opacity : Float
在0.0 - 1.0的范围内的浮点数,表明材质的透明度。值0.0表示完全透明,1.0表示完全不透明。
如果材质的transparent属性未设置为true,则材质将保持完全不透明,此值仅影响其颜色。 默认值为1.0。
.polygonOffset : Boolean
是否使用多边形偏移。默认值为false。这对应于WebGL的GL_POLYGON_OFFSET_FILL功能。
.polygonOffsetFactor : Integer
设置多边形偏移系数。默认值为0。
.polygonOffsetUnits : Integer
设置多边形偏移单位。默认值为0。
.precision : String
重写此材质渲染器的默认精度。可以是"highp", "mediump" 或 "lowp"。默认值为null。
.premultipliedAlpha : Boolean
是否预乘alpha(透明度)值。有关差异的示例,请参阅WebGL / Materials / Transparency。 默认值为false。
.dithering : Boolean
是否对颜色应用抖动以消除条带的外观。默认值为 false。
.shadowSide : Integer
定义投影的面。设置时,可以是THREE.FrontSide, THREE.BackSide, 或Materials。默认值为 null。
如果为null, 则面投射阴影确定如下:
Material.side Side casting shadows
THREE.FrontSide 背面
THREE.BackSide 前面
THREE.DoubleSide 双面
.side : Integer
定义将要渲染哪一面 - 正面,背面或两者。 默认为THREE.FrontSide。其他选项有THREE.BackSide和THREE.DoubleSide。
.transparent : Boolean
定义此材质是否透明。这对渲染有影响,因为透明对象需要特殊处理,并在非透明对象之后渲染。
设置为true时,通过设置材质的opacity属性来控制材质透明的程度。
默认值为false。
.type : String
值是字符串'Material'。不应该被更改,并且可以用于在场景中查找此类型的所有对象。
.uuid : String
此材质实例的UUID,会自动分配,不应该被更改。
.vertexColors : Integer
是否使用顶点着色。默认值为THREE.NoColors。 其他选项有THREE.VertexColors 和 THREE.FaceColors。
.vertexTangents : Boolean
TODO.
.visible : Boolean
此材质是否可见。默认为true。
.userData : object
一个对象,可用于存储有关Material的自定义数据。它不应该包含对函数的引用,因为这些函数不会被克隆。
下面是一些方法:
EventDispatcher 方法在此类中可用。
.clone ( ) : Material
返回与此材质具有相同参数的新材质。
.copy ( material : material ) : Material
将被传入材质中的参数复制到此材质中。
.dispose () : null
处理材质。材质的纹理不会被处理。需要通过Texture处理。
.onBeforeCompile ( shader : Shader, renderer : WebGLRenderer ) : null
在编译shader程序之前立即执行的可选回调。此函数使用shader源码作为参数。用于修改内置材质。
.setValues ( values : object ) : null
values -- 具有参数的容器。 根据values设置属性。
.toJSON ( meta : object ) : null
meta -- 包含元素,例如材质的纹理或图像。 将材质转换为three.js JSON格式。
2. three.js材质种类
名称 | 介绍 |
---|---|
LineBasicMaterial | 一种用于绘制线框样式几何体的材质。 |
LineDashedMaterial | 一种用于绘制虚线样式几何体的材质。 |
MeshBasicMaterial | 一个以简单着色(平面或线框)方式来绘制几何体的材质。这种材质不受光照的影响。 |
MeshLambertMaterial | 一种非光泽表面的材质,没有镜面高光。该材质使用基于非物理的Lambertian模型来计算反射率。 这可以很好地模拟一些表面(例如未经处理的木材或石材),但不能模拟具有镜面高光的光泽表面(例如涂漆木材)。 |
MeshPhongMaterial | 一种用于具有镜面高光的光泽表面的材质。该材质使用非物理的Blinn-Phong模型来计算反射率。 与MeshLambertMaterial中使用的Lambertian模型不同,该材质可以模拟具有镜面高光的光泽表面(例如涂漆木材)。 |
MeshNormalMaterial | 一种把法向量映射到RGB颜色的材质。 |
MeshDepthMaterial | 一种按深度绘制几何体的材质。深度基于相机远近平面。白色最近,黑色最远。 |
MeshDistanceMaterial | 在内部用于使用PointLight来实现阴影映射。 |
MeshMatcapMaterial | 由一个材质捕捉(MatCap,或光照球(Lit Sphere))纹理所定义,其编码了材质的颜色与明暗。可以理解为自带光效果的材质 |
MeshToonMaterial | MeshPhongMaterial卡通着色的扩展。 |
PointsMaterial | 点材质,粒子系统所使用的缺省材料。 |
SpriteMaterial | 点精灵材质,一种使用Sprite的材质。 |
MeshPhysicalMaterial | MeshStandardMaterial的扩展,能够更好地控制反射率。请注意,为了获得最佳效果,您在使用此材质时应始终指定环境贴图。 |
MeshStandardMaterial | 一种基于物理的标准材质,使用Metallic-Roughness工作流程。这种方法与旧方法的不同之处在于,不使用近似值来表示光与表面的相互作用,而是使用物理上正确的模型。 我们的想法是,不是在特定照明下调整材质以使其看起来很好,而是可以创建一种材质,能够“正确”地应对所有光照场景。 |
ShadowMaterial | 此材质可以接收阴影,但在其他方面完全透明。 |
ShaderMaterial | 使用自定义shader渲染的材质。 shader是一个用GLSL编写的小程序 ,在GPU上运行。 您可能需要使用自定义shader, |
这些材料都很常见,这里最最重要的是ShaderMaterial(着色器材质)。日后我将花大量时间说这个,但是现在还不是时候,日后说说Vector3,Matrix3,Matrix4,Quaternion,然后在说说着色器语言。