Three.js开发指南-阅读记录（第四章）

材质介绍

材质	描述
MeshBasicMaterial(网格基础材质)	用于给几何体赋予一种简单的颜色，或者显示几何体的线框
MeshDepthMaterial(网络深度材质)	使用摄像机到网格的距离来决定如何各网格上色
MeshNormalMaterial(网格法向材质)	根据法向量计算物体表面颜色
MeshFaceMaterial(网格面材质)	一个容器，可以给一个几何体不同的面指定不同的材质
MeshLambertMaterial(网格Lambert材质)	这是一种考虑光照因素的材质，可以用来创建暗淡不光亮的物体
MeshPhoneMaterial(网格phone材质)	这是一种考虑光照因数的材质，用于创建光亮的物体
shaderMaterial(着色器材质)	这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式和像素的着色方式
LineBasicMaterial(直线基础材质)	可以用于直线几何体，来创建着色的直线
LineDashMaterial(虚线材质)	用于创建虚线的着色效果

材质的共有属性

基础属性

属性	描述
id(标识符)	用来识别材质，并在材质创建时赋值
uuid（通用唯一识别码）	这是生成的唯一ID，在内部使用
name(名称)	可以赋予材质名称，用于调试的目的
opacity(透明度)	范围从0到1，和transparent一起使用
transparent(是否透明)	值为true或false，如果使用alpha（透明度）通道的纹理，应该设为true
overdraw(过度描绘)	使用THREE.CanvasRender时，多边形会被渲染的大一点儿，当有间隙时可以设置该属性为true
visible(是否可见)	设置材质是否可见，为false时在场景中看不到该物体
side(侧面)	设置几何体那一面的应用材质
needsUpdata(是否更新)	设置true是会使用新的材质更新缓存

融合属性

属性	描述
blending（融合）	决定物体上的材质如何于背景想融合，一般融合模式是THREE.NormalBlending,这种模式只显示材质上层
blendsrc（融合源）	定义物体源如何与背景目标源相融合，默认值为THREE.SrcAlphaFactor,即使用alpha（透明度）通道进行融合
blenddst(融合目标)	定义了融合时如何使用背景目标，默认值为THREE.OneMinusSrcAlphaFactor,含义也是使用源alpha通道进行融合，只是使用的值为1
blendequation(融合公式)	定义如何使用blendsrc和blenddst的值。默认使用它们相加（AddEquation）,使用这三个属性，可以创建自定义的融合模式

高级属性

属性	描述
depthTest	打开或关闭GL—DEPTH_TEST参数，此参数控制是否使用新新像素深度来计算新像素的值
depthWrite	决定材质是否影响WebGL的深度缓存
alphatest	范围0-1，如果某个像素的alpha值小于该值，那么该像素不会显示出来，用来移除某些于透明度相关的毛边

基础材质

1. THREE.MeshBasicMaterial

定义：一种简单的材质，不会受到光照的影响，会被渲染成简单的平面多边形，也可以显示几何体的线框。
私有属性：

属性	描述
color	颜色
wireframe	为true设置材质渲染为线框
wireframeLinewidth	设置线框的线宽
wireframeLinecap	设置线段的端点样式：butt(平),round(圆),square(方),默认为round，WebGRenderer 对象不支持该属性
wireframeLinejoin	线段拐点的样式，和 wireframeLinecap 一样
shading	设置如何着色，可选值：THREE.SmoothShading/THREE.NoShading 和 THREE.FlatShading. 默认为 THREE.SmoothShading，产生一个平滑的对象
vertexColors	顶点颜色
fog（雾化）	设置材质是否受雾化效果影响

使用方式

let basic = new THREE.MeshBasicMaterial({color:0xcccccc})
复制代码

2. THREE.MeshDepthMaterail

定义：不受光照影响，由物体到摄像机的距离决定。可以和其他材质结合使用
私有属性：

属性	描述
wireframe	是否显示线框
wireframeLineWidth	线框的宽度

使用方式：

//场景中的每个对象都会使用该材质
scene.overrideMaterial = new THREE.MeshDepthMaterial()
复制代码

3. 联合材质

实现方式：

//定义网格质
let cubeMaterial = new THREE.MeshDepthMaterial(); 

//定义网格质
let colorMaterial = new THREE.MeshBasicMaterial({
    color:0x00ff00,
    transparent:true, //开启透明度
    blending:THREE.MultiplyBlending //设置融合模式（前景和后景相乘）
});

//调用 THREE.SceneUtils.createMultiMaterialObject() 创建网格，几何体会被复制，返回一个网格组，里面两个网格完全相同。
let cube = new THREE.SceneUtils.createMultiMaterialObject(
cubeGeometry,[colorMaterial, cubeMaterial]);

//缩小 THREE.MeshDepthMaterial 材质的网格，避免闪烁
cube.children[1].scale.set(0.99, 0.99, 0.99);

复制代码

4. THREE.MeshNormalMaterial

材质渲染方式：每个面的颜色由该面向外的法向量得到(法向量是指与面垂直的向量)
属性：

属性	描述
wireframe	是否显示线框
wireframeLinewidth	线框宽度
shading	着色方法：THREE.FlatShading(平面着色)，THREE.SmoothShading平滑着色

材质容器

THREE.MeshFaceMaterial

定义：允许给几何体的每个面指定不同的材质
使用方式：

let matArray = [];
matArray.push(new THREE.MeshBasicMaterial({ color: 0x009e60 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x000060 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x00ff60 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x001260 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x009130 }));
matArray.push(new THREE.MeshBasicMaterial({ color: 0x009ee0 }));

let faceMaterial = new THREE.MeshFaceMaterial(matArray);

let cubeGeom = new THREE.BoxGeometry(3, 3, 3);
let cube = new THREE.Mesh(cubeGeom, faceMaterial)
复制代码

高级材质

1. THREE.MeshLambertMaterial

作用：会受到光源的影响，用来创建黯然不光亮的表面
私有属性：

属性	描述
ambient(环境色)	材质的环境色，和环境光一起使用，两个颜色会相乘，默认为白色
emissive(发射的)	材质发射的颜色，默认为黑色，不受其他光照影响
wrapAround	如何设置为true，则启动半 Lambert 光照技术，光下降的更微妙、柔和、均匀
wrapRGB	当wrapAround为true时，可以使用THREE.Vector3 来控制光下降的速度

使用方式：和其他材质一样

2. THREE.MeshPhonegMaterial

作用：会受到光源的影响，用来创建光亮的材质
私有属性：

属性	描述
ambient	材质的环境色
emissive(发射的)	材质发射的颜色，默认为黑色，不受其他光照影响
specular	指定该材质的光亮程度及高光部分的颜色，如何和color设置一样，会得到一个类似金属的材质，如果设置为grey，则材质变得像塑料
shininess	指定镜面高光部分的亮度，默认为30
metal	设置为true，使物体看起来像金属（微调）
wrapAround	如何设置为true，则启动半 Lambert 光照技术，光下降的更微妙、柔和、均匀
wrapRGB	当wrapAround为true时，可以使用THREE.Vector3 来控制光下降的速度

使用方式：和其他材质一样

3. THREE.ShaderMaterail

作用：可以使用自己定制的着色器
有点复杂，后面在11章写吧

线性几何体材质

1. THREE.LineBasicMaterial

定义：线性基础材质
属性:

属性	描述
color	线的颜色
linewidth	该属性定义线的宽度
linecap	端点的显示样式，butt（平）、round（圆）、square（方），默认round
linejoin	线段连接的样式，butt（平）、round（圆）、square（方），默认round
vertexColors	设置成THREE.VertexColors,给每个顶点设置颜色
fog	材质是否受雾化影响

使用实例：

let points = gosper(4, 60); //返回一个gosper曲线
let lines = new  THERR.Geometry();
let colors = [];
let i = 0;
points.forEach(function (e) {
    lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
    colors[i] = new THREE.Color(0xffffff);
    colors[i].setHSL(e.x/100+0.5), (e.y*20)/300, 0.8);
    i++
});
lines.colors = colors;
let material = new THREE,LineBasicMaterial({
    opacity: 1.0,
    linewidth: 1,
    vertexColors: THREE.VertexColors
});
let line = new THREE.Line(lines, material);

复制代码

2. THREE.LineDashedMaterial

定义：这种材质与THREE.LineBasicMaterial 一样的属性，下面介绍几个额外属性
私有属性：

属性	描述
scale	缩放dashSize 和 gapSize,如果scale小于1，则dashSize和gapSize就会增大；如果scale小于1，dashSize和gapSize就会减小
dashSize	虚线段的长度
gapSize	虚线间隔的宽度

使用方式：

let material = new THREE,LineDashedMaterial({
    vertexColors:true,
    color:0xffffff,
    dashSize:10,
    gapSize:1,
    scale:0.1
});
复制代码