文章目录

• 简介
• • 常用材质
• 点材质
• 线材质
• 网格模型
• 材质和模型的对应关系
• 属性
• • 公有属性
  • • side
    • opacity
  • 私有属性

专栏目录请点击

简介

• 所谓材质，就是平常我们所说的塑料材质，金属材质，纤维材质等
• 实质上所有材质都是WebGL着色器代码的封装

常用材质

1. 点材质:PointsMaterial
2. 线材质
   1. LineBasicMaterial:线基础材质
   2. LineDashedMaterial:虚线材质
3. 网格材质
   1. MeshBasicMaterial:网格基础材质
   2. MeshLambertMaterial:网格Lambert材质,暗淡、漫反射
   3. MeshPhongMaterial:网格Phong材质,高亮表面、镜面反射
   4. PBR材质,比MeshPhongMaterial效果更好
      1. MeshStandardMaterial
      2. MeshPhysicalMaterial
   5. MeshDepthMaterial:网格深度材质
   6. MeshNormalMaterial:网格法向量材质
4. 精灵Sprite材质:SpriteMaterial
5. 自定义着色器材质
   1. RawShaderMaterial
   2. ShaderMaterial

点材质

点材质一般是点模型来进行使用

渲染如下

1. 因为我们用来球模型，然后用点的材质来进行装饰，所以渲染出来的样子是这个样子的

var geometry = new THREE.SphereGeometry(100, 25, 25); //创建一个球体几何对象
// 创建一个点材质对象
var material = new THREE.PointsMaterial({color: 0x0000ff, //颜色size: 3, //点渲染尺寸
});
//点模型对象  参数：几何体  点材质
var point = new THREE.Points(geometry, material);
scene.add(point); //网格模型添加到场景中

线材质

一般用到线模型(也就是Line等线模型)的时候会用到线材质

渲染如下

如果我们换成实线材质，那么渲染就如下

var material = new THREE.LineBasicMaterial({color: 0x0000ff
});

网格模型

在three.js中提供的网格类材质比较多，我们先大致了解一下

1. 基础网格材质MeshBasicMaterial，不受由方向光源影响，没有棱角感

var material = new THREE.MeshBasicMaterial({color: 0x0000ff,
})

2. MeshLambertMaterial材质可以实现网格Mesh表面与光源的漫反射光照计算，有了光照计算，物体表面就会产生棱角感

var material = new THREE.MeshLambertMaterial({color: 0x00ff00,
});

3. MeshPhongMaterial和MeshLambertMaterial相同可以实现光源和网格表面的漫反射的光照计算，还可以产生高光效果

var material = new THREE.MeshPhongMaterial({color: 0xff0000,specular:0x444444,//高光部分的颜色shininess:20,//高光部分的亮度，默认30
});

材质和模型的对应关系

1. 点材质 点模型Points
2. 线材质 线条类型的模型
   1. Line
   2. LineLoop
   3. LineSegments
3. 网格材质
   1. 网格模型:Mesh
   2. 骨骼模型:SkinnedMesh
4. 精灵材质 精灵模型:Sprite

属性

公有属性

所有材质的基类都是Material 点击

• 只要是Material 的属性，那么他其他的材质对象，他都会有
• 除公有属性之外，不同类型的属性也会有各自的私有属性

side

这就是一个公有属性:定义将要渲染哪一面 - 正面，背面或两者都渲染

• 矩形平面plangegeometry的网络模型插入场景后看不到，一个球体或立方体网格模型如何正面显示，背面不显示，都可以通过.side属性来进行设置

opacity

• 通过opacity属性可以设置材质的透明度，他的范围是0.0~1.0之间，其中0表示完全透明，1表示完全不透明
• 使用当前属性的时候，一般要需要设置材质属性transparent为true，如果没有设置为true，材质会保持完全不透明的状态

私有属性

1. 点材质有自己特有的属性size
2. 高光材质特有的高光颜色属性specular等