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