Three.js 的材質總類

前言 - Prologue

Three.js 提供了許多不同的材質（Material）類型，包括一些常見和不太常見的。

正文 - Main text

以下是常見和不常見的 Three.js 材質類型及其簡要介紹：

Common Materials

常見材質（Common Materials）：

1. 基本材質 MeshBasicMaterial
2. Lambert 材質 MeshLambertMaterial
3. Phong 材質 MeshPhongMaterial
4. 標準材質 MeshStandardMaterial
5. 物理材質 MeshPhysicalMaterial
6. 點材質 PointsMaterial
7. 線條基本材質 LineBasicMaterial

Less Common Materials

不常見材質（Less Common Materials）：

1. Toon 材質 MeshToonMaterial
2. 深度材質 MeshDepthMaterial
3. 法線材質 MeshNormalMaterial
4. 自定義着色器材質 ShaderMaterial
5. 陰影材質 ShadowMaterial
6. 原始着色器材質 RawShaderMaterial

每個材質類型及其用途

1.LineBasicMaterial：

• 線條基本材質
• 用於渲染線條的基本材質。
• 可以設置線條的顏色、寬度等屬性。

官方文檔：一種用於繪製線框樣式幾何體的材質。

2.LineDashedMaterial：

• 虛線材質
• 用於渲染虛線的材質。
• 可以設置虛線的顏色、寬度、間隔等屬性。

官方文檔：一種用於繪製虛線樣式幾何體的材質。

3.MeshBasicMaterial：

• 基本材質
• 基本的材質，不受光照影響，只顯示基本顏色或貼圖。
• 不考慮陰影或反射等光照效果。
• 若需一個會對光線產生反應的材質, 就不應該選擇此材質。

官方文檔：一個以簡單著色（平面或線框）方式來繪製幾何體的材質。
這種材質不受光照的影響。

4.MeshDepthMaterial：

• 深度材質
• 根據物體與相機之間的深度值來渲染物體的深度材質。
• 用於渲染深度圖或後期效果。

官方文檔：一種按深度繪製幾何體的材質。深度基於相機遠近平面。白色最近，黑色最遠。

5.MeshDistanceMaterial：

• 距離材質
• 根據物體到相機的距離來渲染物體的距離材質。
• 用於渲染距離圖或後期效果。

官方文檔：MeshDistanceMaterial – three.js docs

6.MeshLambertMaterial：

• Lambert 材質，考慮光照影響，使用漫射光照模型。
• 支持基本的光照和陰影效果。
• 相對於具有高光反射的材質，它顯示出較為柔和和平均的外觀。
• 可以對光源產生漫反射反應，而不會有明顯的高光反射效果。
• 只需設定材質的顏色即可。

官方文檔：一種非光澤表面的材質，沒有鏡面高光。

7.MeshMatcapMaterial：

• 使用 Matcap（材質球）紋理的材質。
• 可以實現具有高光效果的材質外觀。

官方文檔：MeshMatcapMaterial 由一個材質捕捉（MatCap，或光照球（Lit Sphere））紋理所定義，其編碼了材質的顏色與明暗。

8. MeshNormalMaterial：

• 法線材質
• 根據法線向量來渲染物體的法線材質。
• 用於渲染法線貼圖或法線效果。

官方文檔：一種把法向量映射到RGB顏色的材質。

9.MeshPhongMaterial：

• Phong 材質，考慮光照影響，使用鏡面高光光照模型。
• 支持漫射、鏡面反射、陰影等效果。
• 可設定材質的顏色、鏡面高光顏色、透明度等屬性。
• 可設定材質的光澤程度（shininess），用於控制材質的光滑度。
• 支持基於光源的陰影效果。

官方文檔：一種用於具有鏡面高光的光澤表面的材質。

10.MeshPhysicalMaterial：

• 物理材質，擴展於標準材質，支持更多物理屬性，如透明度、金屬度等。
• 提供更真實的材質外觀，適用於逼真的渲染。

官方文檔：MeshPhysicalMaterial – three.js docs

11.MeshStandardMaterial：

• 標準材質，使用物理正確的光照模型，支持漫射、高光、粗糙度等。
• 提供逼真的渲染效果，用於大多數場景。

官方文檔：一種基於物理的標準材質，使用 Metallic-Roughness 工作流程。

12.MeshToonMaterial：

• Toon 材質，用於製作卡通風格的物體，只有漫射光照。
• 提供扁平、卡通風格的渲染效果。

官方文檔：一種實現卡通著色的材質。

13.PointsMaterial：

• 點材質，用於渲染粒子系統。
• 可以設置點的大小、顏色等屬性。

官方文檔：Points 使用的默認材質。

14.RawShaderMaterial：

• 原始着色器材質，用於直接訪問WebGL原始着色器功能。
• 可以自定義編寫GLSL着色器程序。

官方文檔：RawShaderMaterial – three.js docs

15.ShaderMaterial：

• 自定義着色器材質，通過編寫自定義着色器來實現特定的渲染效果。
• 可以自定義編寫頂點着色器和片元着色器程序。

官方文檔：ShaderMaterial – three.js docs

16.ShadowMaterial：

• 陰影材質，用於渲染陰影效果。
• 用於渲染物體的陰影部分。

官方文檔：此材質可以接收陰影，但在其他方面完全透明。

17.SpriteMaterial：

• 精靈材質
• 用於渲染精靈（Sprite）的材質。
• 可以設置精靈的顏色、大小等屬性。

官方文檔：一種使用 Sprite 的材質。

後記 - Epilogue

這些材質類型可以根據不同的需求和應用場景選擇使用。此外，Three.js 還提供了其他一些特定用途的材質，以及用於自定義的材質擴展機制。

根據具體的需求，可以參考下方 Three.js 官方文檔了解更多。

參考資料 - Reference

[1] Material – three.js docs

https://threejs.org/docs/#api/zh/materials/Material