前言 - Prologue
在 Three.js 中,材質是一個重要的概念,它們決定了物體的外觀、質感和反應光線的方式。無論是基本的顏色和貼圖,還是更高級的光照模型和物理特性,材質屬性都提供了許多選項來實現所需的渲染效果。
正文 - Main text
以下是每個 Three.js 材質(Material)共有的一些基本屬性:
| 屬性 | 描述 |
|---|
| id | 材質的唯一識別符(自動分配)。 |
| name | 材質的可選名稱(不必是唯一的)。默認值為空字符串。 |
| side | 設置哪一面(正面或背面)應用材質。默認為 Three.FrontSide(正面),其他可選值為 Three.BackSide(背面)和 Three.DoubleSide(兩面)。 |
| opacity | 材質的不透明度(0.0 到 1.0 之間的浮點數)。如果材質的 transparent 屬性未設置為 true ,則材質將保持完全不透明,此值僅影響其顏色。默認值為 1.0。 意味需搭配 transparent 屬性使用。 |
| transparent | 設置材質是否透明。當設置為 true 時,材質可以具有不透明度。 |
| visible | 設置材質是否可見。當設置為 false 時,對象將不會被渲染。 |
| needsUpdate | 設置是否需要更新材質。默認值為 false,當屬性變化時需要設置為 true。 |
| premultipliedAlpha | 設置是否使用預乘 Alpha。默認值為 false。 有關差異的示例,請參閱 WebGL / Materials / Physical / Transmission。 |
| blending | 設置材質的混合模式。 可選值包括 Three.NormalBlending(正常混合)、Three.AdditiveBlending(加法混合)、Three.SubtractiveBlending(減法混合)等。 |
| blendSrc | 設置混合模式的源混合因子。默認值為 Three.SrcAlphaFactor。 |
| blendDst | 設置混合模式的目標混合因子。默認值為 Three.OneMinusSrcAlphaFactor。 |
| blendEquation | 設置混合模式的混合方程式。默認值為 Three.AddEquation。 |
| depthTest | 設置是否在渲染時進行深度測試。默認值為 true。 |
| depthWrite | 設置是否在渲染時將深度寫入緩衝區。默認值為 true。 |
| polygonOffset | 設置多邊形偏移,用於渲染不同深度的多邊形。可以設置 polygonOffsetFactor 和 polygonOffsetUnits。 |
| alphaTest | 設置透明度測試的閾值。當透明度小於該值時,將不會渲染像素。默認值為 0。 |
| toneMapped | 設置是否對材質進行色調映射。默認值為 true。 |
| userData | 用戶自定義的資料對象,可以存儲任意額外的屬性或資料。 它不應該包含對函數的引用,因為這些函數不會被克隆。 |
| precision | 設置材質的精度。可選值為 "highp"、"mediump" 或 "lowp"。默認值為 null。 |
| colorWrite | 指定是否將材質的顏色寫入緩衝區。 |
| fog | 指定材質是否受到全局雾效的影響。 官方文件:Fog – three.js docs |
這些屬性是每個材質共有的,它們提供了對材質的基本控制和配置。除了這些基本屬性外,不同類型的材質(例如 MeshPhongMaterial、MeshBasicMaterial 等)還可能具有特定於該類型的屬性,用於進一步控制材質的外觀和行為,可根據具體的需求和材質類型來選擇和設置適當的屬性。
後記 - Epilogue
材質是創建令人驚嘆的 3D 場景的關鍵要素之一,熟悉並善於運用這些屬性將使我們能夠實現各種視覺效果,從基本的材質到逼真的光照和物理模擬。
參考資料 - Reference
[1] Material – three.js docs
https://threejs.org/docs/#api/zh/materials/Material