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

2018-02-12 18:30:38 人阅读

案例查看有问题?
全屏试试!

案例解析

 

种类

名称 描述
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 });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 或者,创建一个实例,然后分别设置相关属性
var material = new THREE.MeshBasicMaterial(); material.color = new THREE.Color(0xff000); material.name = "material"; material.opacity = 0.5; material.transparent = true;
  • 1
  • 2
  • 3
  • 4
  • 5

案例源代码


                                            
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多