iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0

在準備幫專案的人物貼上皮膚前,今天先來了解一下材質的種類以及屬性吧!

Three.js 作品範例示意圖

Photo by Patrick Tomasso on Unsplash


這是本系列第 07 篇,如果還沒看過第 06 篇可以點以下連結前往:

用 Three.js 來當個創世神 (06):專案實作#3 - OrbitControls、stats.js


材質種類

前面有提過材質(material)是物體(object)表面除了幾何體(geometry)以外所有可視屬性的集合,像是顏色(color)、紋理(texture)、透明度(opacity)、發光度(shininess)、鏡面反射程度(specular)等等。

在 Three.js 中有以下幾種常用的材質:

材質 說明 圖示
MeshBasicMaterial 網面基礎材質。賦予幾何體一個簡單的顏色,不考慮場景中光源的影響。 basicMat
MeshNormalMaterial 網面法向材質。透過法向量(與面垂直的向量)計算物體表面的顏色,也不受光源影響。 normalMat
MeshLambertMaterial 網面朗伯特材質。受光源影響,常用於創建暗淡不光亮的物體。 lambertMat
MeshPhongMaterial 網面馮氏材質。受光源影響,常用於創建光亮的物體。 phongMat
MeshStandardMaterial 網面標準材質。基於 PBR(Physically Based Rendering)計算出來的材質,透過更複雜的算法讓物體更能反應在真實物理環境的外觀。 standardMat

 

材質比較

基礎材質

依據筆者的理解, MeshBasicMaterialMeshNormalMaterial 主要被用在開發過程中的實驗上,由於他們不受光源影響,可以在還沒設置光源到場景中時,使用這兩種材質測試物體是否能正確顯示到畫面中,或是在除錯過程中能排除光源的問題,對材質進行測試。

高級材質

在範例中常會看到 MeshLambertMaterialMeshPhongMaterial,這兩種材質都能與光源有互動,但兩者根據不同的著色算法,會呈現不同的感覺,前者是較黯淡粗糙的塑膠感,後者則是較光亮平滑的金屬感,主要的差異在於馮氏材質具有 鏡面反射(specular) 這個屬性,這個屬性可以指定高光的反射顏色,讓物體更具金屬感。

而在查官網文件時,看到兩個相對比較新的材質分別是 MeshStandardMaterialMeshPhysicalMaterial,比起朗伯特與馮氏只是透過近似值來模擬光與材質間的互動,MeshStandardMaterial 使用更複雜的算法,讓物體更具真實感,甚至可以設定金屬感(metalness)與粗糙度(roughness)。

MeshPhysicalMaterial 則是由前者延伸出來的材質,但多了一個 反射率(reflectivity)的屬性,讓調整的彈性更大。

 

材質屬性

材質屬性 說明
color 就是材質的顏色
transparent 是否透明,設為 true 後,可以依據 opacity 調整透明度。
opacity 透明度,與 transparent 搭配使用,值從 0 到 1。
wireframe 設為 true 可將材質渲染成線框,適合拿來開發除錯。
side 決定幾何體哪一面使用此材質,預設為 THREE.FrontSide(外側),另外也可以設定為 THREE.BackSide(內側)THREE.DoubleSide(兩側)
map 貼圖屬性,可透過 THREE.TextureLoader() 載入圖片資源貼在幾何體上。

材質的屬性非常之多,這邊只簡單介紹每個材質共用且常見的幾個,更高級的材質還可以設定像是反射率(specular)亮度(shininess)材質發散色彩(emissive)等等,建議需要調整細節時再到官網查詢即可!

 

今日小結

今天介紹各種材質種類、比較與共同屬性,由於都是 API 的替換,規劃明天會透過專案實作來實際展示如何幫苦力怕貼上皮膚,我們明天見!


上一篇
用 Three.js 來當個創世神 (06):專案實作#3 - OrbitControls、stats.js
下一篇
用 Three.js 來當個創世神 (08):專案實作#4 - 人物材質與貼圖
系列文
用 Three.js 來當個創世神31

尚未有邦友留言

立即登入留言