Material 材质

Material 用来定义 MeshLinePointsObject3D 物体的皮肤, 是你看上去, 这个物体的颜色、光滑度、光泽度、透明度等综合特征, 即除了形状之外的特征. 是 new THREE.Mesh( geometry, material ) 的第二个参数.

Attributes

name : String

Default value : ""
Description : 名称.

type : String

Default value : Material
Description : 类型.

isMaterial : Boolean

Default value : true (只读)
Description : 类型是否为Material.

alphaTest : Float ( 0 ~ 1 )

Default value : 0
Description : alpha 测试. 如果像素的 alpha 值小于 alphaTest, 那么该像素就不会显示出来.

blending : Integer

Default value : THREE.NormalBlending
Description : 融合模式. 决定物体上的材质如何跟背景融合. 默认是 NormalBlending, 只显示材质的上层. 除了使用标准融合模式, 还可以使用自定义模式 CustomBlending, 必须指定 blendSrc、blendDst 和 blendEquation.

blendSrc : Integer

Default value : THREE.SrcAlphaFactor
Description : 融合源. 该属性指定物体(源)如何跟背景(目标)相融合. 默认值是 SrcAlphaFactor, 即使用源 alpha 通道进行融合.

blendDst : Integer

Default value : THREE.OneMinusSrcAlphaFactor
Description : 融合目标. 也是使用源 alpha 通道进行融合, 用的值为1.

blendEquation : Integer

Default value : THREE.AddEquation
Description : 融合公式. 指定如何使用 blendSrc 和 blendDst. 默认方法是 AddEquation, 将两个颜色值相加.

blendSrcAlpha : Integer

Default value : null
Description : blendSrc 的透明度.

blendDstAlpha : Integer

Default value : null
Description : blendDst 的透明度.

blendEquationAlpha : Integer

Default value : null
Description : blendEquation 的透明度.

depthFunc : Integer

Default value : THREE.LessEqualDepth
Description : 深度方程

depthTest : Boolean

Default value : true
Description : 深度测试, 打开或关闭 gl.DEPTH_TEST. 它决定像素深度是否用来计算新的像素值.

depthWrite : Boolean

Default value : true
Description : 渲染材质是否作用于深度缓存. 当用于二维贴图时, 设为 false.

clipIntersection : Boolean

Default value : false
Description : 是否裁剪相交部分, 而非结合部分.

clippingPlanes : Array ( Plane )

Default value : null
Description : 裁剪平面. 见下面图解.

clipShadows : Boolean

Default value : false
Description : 是否裁剪阴影.

colorWrite : Boolean

Default value : true
Description : 是否渲染材质的颜色.

dithering : Boolean

Default value : false
Description : 是否对颜色应用抖动以消除条纹.

flatShading : Boolean

Default value : false
Description : 是否使用平面着色来渲染.

fog : Boolean

Default value : true
Description : 是否受雾化效果的影响.

lights : Boolean

Default value : true
Description : 是否接收光照.

needsUpdate : Boolean

Default value : true
Description : 是否更新缓存.

opacity : Float

Default value : 1
Description : 不透明度, 默认1是不透明. 当为0时就完全透明.

polygonOffset : Boolean

Default value : false
Description : 是否使用多边形偏移.

polygonOffsetFactor : Float

Default value : 0
Description : 多边形偏移因子.

polygonOffsetUnits : Float

Default value : 0
Description : 多边形偏移单位.

precision : String ( "highp", "mediump", "lowp" )

Default value : null
Description : 渲染精度.

premultipliedAlpha : Boolean

Default value : false
Description : 是否左乘透明度.

shadowSide : Integer ( THREE.FrontSide, THREE.BackSide, THREE.DoubleSide )

Default value : null
Description : 哪一个面投射阴影.

side : Integer ( THREE.FrontSide, THREE.BackSide, THREE.DoubleSide )

Default value : THREE.FrontSide
Description : 物体的表面哪一面被展示, 有正面、背面、双面. 默认的是正面, 当摄像机旋转到物体的背面时, 物体将不被展示.

transparent : Boolean

Default value : false
Description : 是否透明. 设为 true 时, 才能用 opacity 来设置透明度. mesh.material.transparent = true; mesh.material.opacity = 0.5;

vertexColors : Integer ( THREE.NoColors, THREE.VertexColors, THREE.FaceColors )

Default value : THREE.NoColors
Description : 顶点着色.

visible : Boolean

Default value : true
Description : 是否可见.

userData : Object

Default value : {}
Description : 用户数据.

Methods

onBeforeCompile( )

setValues( values ) :
values

toJSON( meta ) : Json
meta Object 元数据

返回 Json 格式的数据

clone( ) : this

复制自身

copy( source ) : this
source Material 源材料

把源材料复制一份

dispose( )

删除材质.

图解API

1. side: 绘制哪一面

上面的3个图分别是:THREE.FrontSide, THREE.BackSide, THREE.DoubleSide. 点开查看

const material = new THREE.MeshPhongMaterial({ color: 0x4d2c4d, side: THREE.BackSide }); 2. depthTest 设为 false: 关闭了深度测试 gl.DEPTH_TEST

上面的3个图分别是 depthTest 是 false 时:THREE.FrontSide, THREE.BackSide, THREE.DoubleSide. 点开查看

const material = new THREE.MeshPhongMaterial({ color: 0x4d2c4d, depthTest: false }); 3. 透明度 opacity: 必须把 transparent 设为 true

上面的3个图分别是 opacity:1, 0.5, 0.2. 点开查看

const material = new THREE.MeshPhongMaterial({ color: 0x4d2c4d, transparent: true opacity: 0.5 }); 4. 裁剪面 clippingPlanes: 把物体裁开

数组里面的元素是 Plane. 裁剪后, 依照 Plane 的法向部分可见. 点开查看

const plane = new THREE.Plane( new THREE.Vector3(0, 1, 0), 1); const material = new THREE.MeshPhongMaterial({ color: 0xffee33, side: THREE.DoubleSide, clippingPlanes: [plane], clipShadows: true });