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

JS_Feng
498 阅读6分钟

材质介绍

材质描述
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
});
avatar
文章
阅读
粉丝