Three.js材質效果

本文是Three.js電子書的1.5節

前面案例中幾何體對應網格模型材質隻是設定了一個顔色，實際渲染的時候往往會設定其他的參數，比如實作玻璃效果要設定材質透明度，一些光亮的表面要添加高光效果。

半透明效果

更改場景中的球體材質對象構造函數THREE.MeshLambertMaterial()的參數，添加

opacity

和

transparent

屬性，

opacity

的值是

0~1

之間，

transparent

表示是否開啟透明度效果， 預設是

false

表示透明度設定不起作用，值設定為

true

，網格模型就會呈現透明的效果，使用下面的代碼替換原來的球體網格模型的材質， 重新整理浏覽器,通過滑鼠旋轉操作場景,可以看到半透明的球體和立方體顔色疊加融合的效果。

var sphereMaterial=new THREE.MeshLambertMaterial({
    color:0xff0000,
    opacity:0.7,
    transparent:true
});//材質對象
           

材質對象的一些屬性可以在構造函數參數中設定，也可以通路材質對象的屬性設定。

material.opacity = 0.5 ;
material.transparent = true ;
           

材質常見屬性

材質屬性	簡介
color	材質顔色，比如藍色0x0000ff
wireframe	将幾何圖形渲染為線框。 預設值為false
opacity	透明度設定，0表示完全透明，1表示完全不透明
transparent	是否開啟透明，預設false

添加高光效果

直接使用下面的代碼替換上面的透明度材質即可，重新整理浏覽器可以看到球體表面的高光效果。

var sphereMaterial=new THREE.MeshPhongMaterial({
    color:0x0000ff,
    specular:0x4488ee,
    shininess:12
});//材質對象
           

處在光照條件下的物體表面會發生光的反射現象，不同的表面粗糙度不同，宏觀上來看對光的綜合反射效果，可以使用兩個反射模型來概括，一個是漫反射，一個是鏡面反射， 使用渲染軟體或繪畫的時候都會提到一個高光的概念，其實說的就是實體光學中鏡面反射産生的局部高亮效果。實際生活中的物體都是鏡面反射和漫反射同時存在，隻是那個占得比例大而已， 比如樹皮的表面更多以漫反射為主基本沒有展現出鏡面反射，比如一輛轎車的外表面在陽光下你會看到局部高亮的效果，這很簡單汽車表面經過抛光等表面處理粗糙度非常低， 鏡面反射效果明顯，對于three.js而言漫反射、鏡面反射分别對應兩個構造函數MeshLambertMaterial()、MeshPhongMaterial(),通過three.js引擎你可以很容易實作這些光照模型，不需要自己再使用原生WebGL實作，更多關于光照模型的知識可以參考文章《WebGL_course光照渲染立方體》或計算機圖形學的相關書籍。

前面案例都是通過構造函數

MeshLambertMaterial()

實作漫反射進行渲染，高光效果要通過構造函數

MeshPhongMaterial()

模拟鏡面反射實作，屬性

specular

表示球體網格模型的高光顔色，改顔色的RGB值會與光照顔色的RGB分量相乘，

shininess

屬性可以了解為光照強度的系數，初學的的時候這些細節如果不清楚，不用深究，每個人的基礎不同，了解問題的深度和角度不同，比如高光，學習過計算機圖形學的會聯想到鏡面反射模型和實體光學， 從事過與美術相關工作，都知道需要的時候會給一個物體添加高光，視覺效果更加高亮，是以對于構造函數

MeshPhongMaterial()

的參數設定不太清除也沒關系，對于零基礎的讀者本節課的要求就是有個簡單印象就可以， 站在黑箱外面了解黑箱；對于有WebGL基礎的，可以思考three.js引擎構造函數實際封裝了哪些WebGL API和圖形學算法，站在黑箱裡面了解黑箱，如果是你你會怎麼封裝開發一個三維引擎，這樣你可以從底層了解上層的問題， 保證學習的連貫性；如果你使用過其它的三維模組化渲染軟體，那就使用three.js這個黑箱類比一個你熟悉的黑箱，通過類比降低學習難度，比如你可以打開3dmax軟體設定一個材質的高光，體驗下視覺效果。

材質類型

threejs提供了很多常用的材質效果，這些效果本質上都是對WebGL着色器的封裝，對于開發者來說直接使用就可以,這裡不再做過多介紹，大家現有一個印象即可。

材質類型	功能
MeshBasicMaterial	基礎網格材質，不受光照影響的材質
MeshLambertMaterial	Lambert網格材質，與光照有反應，漫反射
MeshPhongMaterial	高光Phong材質,與光照有反應
MeshStandardMaterial	PBR實體材質，相比較高光Phong材質可以更好的模拟金屬、玻璃等效果