一、MeshBasicMaterial介绍
MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框，对场景中的雾化会有反应。
1、属性
| property | 属性名 | 功能 |
|---|---|---|
| color | 颜色 | 设置材质的颜色 |
| wireframe | 线框 | 设置这个属性的可以将材质渲染成线框，非常适合调试 |
| wireframeLinewidth | 线框宽度 | 如果已经打开了wirefreme，这个属性定义线框中线的宽度 |
| wireframeLinecap | 线框线段端点 | 这个属性定义了线框模式下顶点键线段的端点如何显示。可选的值包括butt（平）、round（圆）和square（方）默认值为round。在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性。 |
| wireframeLinejoin | 线框线段连接点 | 这个属性定义了线段的连接点如何显示。可选的值有round（圆）、bevel |
| shading | 着色 | 该属性定义如何着色。可选的值有THREE.SmoothShading、THREE.NoShading和THREE.FlatShading。默认值为THREE.SmoothShading，这将产生一个平滑的对象，看不到单个面 |
| vertexColors | 顶点颜色 | 可以通过这个属性给每个顶点定义不同的颜色。默认值为THREE.NoColors。如果将这个值设置为THREE.VertexColors，渲染器会采用THREE.Geometry对象的colors属性的值。该属性对象CanvasRenderer不起作用，但对WebGLRenderer起作用 |
| fog | 雾化 | 该属性指定当前材质是否受全局雾化效果设置的影响。默认true，如果设置为false，将不会受雾化的影响 |
2、使用
const meshMaterial = new THREE.MeshBasicMaterial({color:0xeeefff});
const sphereGeometry = new THREE.SphereGeometry(10, 30, 30);
const sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
scene.add(sphere);
二、MeshPhongMaterial介绍
该材料使用非基于物理的Blinn-Phong模型来计算反射系数。通过THREE.MeshPhongMaterial，可以创建一种光亮的材质，与在MeshLambertMaterial中使用的Lambertian模型不同，它可以模拟带有高光的闪亮表面（如漆木）。
1、MeshPhongMaterial属性
| 属性名称 | 描述 | 备注 |
|---|---|---|
| color | 材料的颜色，默认为白色 | 常用 |
| shininess | 光滑度，指定高光部分的亮度，默认值为30 | 常用 |
| specular | 材料高光部分的颜色，默认值为0x111111深灰色，如果把它的颜色设置为跟color颜色一样的话，会得到类似金属一样的材质，设置成灰色，则看起来更像塑料 | |
| ambient | 这是材质的环境色。它与上一章讲过的环境光源一起使用。这个颜色会与环境光源提供的颜色相乘。默认值为白色 | |
| emissive | 这是该材质发射的颜色。它其实并不想一个光源，只是一种纯粹的、不受其他光照影响的颜色。默认值为黑色。 | |
| metal | 如果此属性设置为true，Three.js会使用稍微不同的方式计算像素的颜色，以使物体看起来更像金属。要注意的是，这个效果非常小 | |
| wrapAround | 如果这个属性设置为true，则启动半lambert光照技术。有了它，光下降得更微妙。如果网格有粗糙、黑暗的地区，启用此属性阴影将变得柔和并且分布更加均匀 | |
| wrapRGB | 当wrapAround属性设置为true时，可以使用THREE.Vector3来控制光下降得速度 |
2、MeshPhongMaterial使用
const sphereGeometry = new THREE.SphereGeometry(50, 50, 50);
const sphereMaterial = new THREE.MeshPhongMaterial({color: 0x836DED});
sphereMaterial.shininess = 100;
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
scene.add(sphere);
