前言 - 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