前言
在ThreeJS学习：场景、模型、相机、渲染中，我们简单介绍了ThreeJS中的物体包含两个要素，一个是形状，一个是材质，本章节进行材质的学习。
一、材质介绍
什么材质？简单来说，材质是材料与质感的结合体，指物体表面的质地特征，由色彩、纹理、光滑度等可视属性构成。
所以不同的材质，物体表面的展示是效果不同。
比如，地板的种类又很多，不同的材质，地板的展示效果是不同的。
在ThreeJS中，用Material来定义物体的材质。
本章节中，介绍开发中常用的物体材质子类。
一、网络基础材质 MeshBasicMaterial
此种材质是ThreeJS中的一种基础材质，它不受光照的影响，始终以纯色或纹理显示。
不论光照强度和颜色咋样变化，物体表面完全按照材质本身的配置进行显示。
// 创建几何体，模型的形状
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建网络基础材质
const material = new THREE.MeshBasicMaterial({
color: 0xff_00_00, // 0xff0000设置材质颜色为红色
transparent: false, // 开启透明
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
二、网络漫反射材质 MeshLambertMaterial
什么是漫反射？
漫反射是指光线被粗糙表面无规则地向各个方向反射的现象。很多物体，如植物、墙壁、衣服等，其表面粗看起来似乎是平滑，但用放大镜仔细观察，就会看到其表面是凹凸不平的，所以本来是平行的太阳光被这些表面反射后，就弥漫地射向不同方向。
MeshLambertMaterial就是用来表示生活中这些粗糙的物体的材质。其是受光照影响的，光的强度越强，材质表面越亮，反之越暗。
// 创建几何体，模型的形状
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建漫反射材质
const material = new THREE.MeshLambertMaterial({
color: 0xFF_00_00, // 0xff0000设置材质颜色为红色
transparent: true, // 开启透明
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
// 创建灯光
const pointLight = new THREE.PointLight(0xFF_FF_FF, 100);
pointLight.position.set(100, 100, 0);
pointLight.decay = 0.9;
scene.add(pointLight);
三、网络高光材质
高光材质，主要是用来模拟表面光泽的材质，例如镜子、玻璃、金属等表面光滑的物体材质。其受光照的影响，光照越强显示越亮。
// 创建几何体，模型的形状
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建漫反射材质
const material = new THREE.MeshPhongMaterial({
color: 0xff_00_00, // 0xff0000设置材质颜色为红色
shininess: 30, // 控制高光的集中程度，值越高表面越闪亮
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
四、物理材质 PBR
所谓PBR就是，基于物理的渲染。基于物理的光照模型可以提供更逼真的、更接近生活中的材质效果，当然也会占用更多的电脑硬件资源。
ThreeJS中，提供了MeshStandardMaterial和MeshPhysicalMaterial两个api来实现PBR材质。
1、MeshStandardMaterial
// 创建几何体，模型的形状
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建物理材质
const material = new THREE.MeshStandardMaterial({
metalness: 1, // 金属度属性 表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。
roughness: 0.5, // 表面粗糙度表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
2、MeshPhysicalMaterial
MeshPhysicalMaterial是MeshStandardMaterial的子类，在MeshStandardMaterial的基础上清漆、透光率等属性，用来实现更接近物体的材质效果，当然性能要求也越高。
// 创建几何体，模型的形状
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建物理材质
const material = new THREE.MeshPhysicalMaterial({
metalness: 1,
roughness: 0.5,
clearcoat: 1, // 清漆层: 用来模拟物体表面一层透明图层，就好比你在物体表面刷了一层透明清漆，喷了点水
clearcoatRoughness: 0.1, // 清漆层粗糙度: 表示物体表面清漆层的粗糙程度
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
五、点材质 PointsMaterial
通常用于设置点对象的时候，才使用的材质。其他属性设置与MeshBasicMaterial基本一致。
// 创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
// 类型化数组创建顶点数据
const vertices = new Float32Array([
0,
0,
0, // 顶点1坐标
50,
0,
0, // 顶点2坐标
0,
50,
0, // 顶点3坐标
0,
0,
50, // 顶点4坐标
]);
const attribue = new THREE.BufferAttribute(vertices, 3);
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;
// 点材质对象
const material = new THREE.PointsMaterial({
color: 0xFF_00_00, // 点颜色
size: 10, // 点对象像素尺寸
});
// 创建点模型对象
const mesh = new THREE.Points(geometry, material);
mesh.position.set(0, 0, 0);
六、线基础材质 LineBasicMaterial
线基础材质通常在绘制线段（直线、曲线等）的时候使用的模型材质，其他用法与MeshBasicMaterial基本一直。
const startPoint = new THREE.Vector2(0, 0);
const endPoint = new THREE.Vector2(50, 50);
/**
* 创建直线
* 第一个参数：直线开始坐标
* 第二个参数：直线结束坐标
*/
const line = new THREE.LineCurve(startPoint, endPoint);
const pointArray = line.getPoints(3);
// 创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(pointArray);
const material = new THREE.LineBasicMaterial({
color: 0xff_00_ff, // 线条颜色
});
// 创建模型对象
const mesh = new THREE.Line(geometry, material);
mesh.position.set(0, 0, 0);
七、精灵材质 SpriteMaterial
精灵材质是在绘制精灵模型的时候才会使用的材质。具体学习可参考精灵模型
