Three.js之MeshBasicMaterial材质与MeshPhongMaterial材质

一、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);

参考3dDemo
参考3dDemo2-向量颜色

二、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);

参考3dDemo