Threejs 材質(zhì) API

以下是 Three.js Material（材質(zhì)基類） 的完整中文說明：

概述
Material 是所有材質(zhì)的抽象基類，定義了物體外觀的渲染方式。其屬性與方法具有渲染器無關(guān)性，可在不同渲染器之間復(fù)用。

構(gòu)造函數(shù)

Material()

創(chuàng)建一個(gè)通用材質(zhì)基類（通常不直接實(shí)例化）。

核心屬性（所有材質(zhì)繼承的通用屬性）

  1. 透明度與混合
屬性 類型 描述
.alphaHash Boolean 啟用哈希透明（替代 .transparent 或 .alphaTest），通過隨機(jī)閾值實(shí)現(xiàn)無排序問題的透明近似。會(huì)引入噪點(diǎn)，可用 TAARenderPass 降噪。默認(rèn) false。
.alphaTest Float 透明度測試閾值（范圍 0-1），低于此值的像素不渲染。默認(rèn) 0。
.alphaToCoverage Boolean 啟用 Alpha to Coverage（需開啟 MSAA 抗鋸齒）。優(yōu)化裁剪邊緣和 alphaTest 鋸齒。默認(rèn) false。
.transparent Boolean 是否啟用透明度（需配合 .opacity 使用）。透明物體在非透明物體之后渲染。默認(rèn) false。
.opacity Float 不透明度（0 全透明，1 不透明）。若未啟用 .transparent，僅影響顏色不透明度。默認(rèn) 1。
  1. 混合模式
屬性 類型 描述
.blending Integer 混合模式（如 THREE.NormalBlending）。需設(shè)為 CustomBlending 才能使用自定義混合參數(shù)。默認(rèn) NormalBlending。
.blendSrc Integer 源混合因子（如 THREE.SrcAlphaFactor）。默認(rèn) SrcAlphaFactor。
.blendDst Integer 目標(biāo)混合因子（如 THREE.OneMinusSrcAlphaFactor）。默認(rèn) OneMinusSrcAlphaFactor。
.blendEquation Integer 混合方程（如 THREE.AddEquation）。默認(rèn) AddEquation。
.blendColor Color 常量混合顏色（僅用于 ConstantColor 混合模式）。默認(rèn) 0x000000。
.blendAlpha Float 常量混合 Alpha（僅用于 ConstantAlpha 混合模式）。默認(rèn) 0。
  1. 深度與模板測試
屬性 類型 描述
.depthTest Boolean 是否啟用深度測試。禁用時(shí)同時(shí)禁用深度寫入。默認(rèn) true。
.depthWrite Boolean 是否寫入深度緩沖（禁用可用于 2D 疊加層）。默認(rèn) true。
.depthFunc Integer 深度比較函數(shù)（如 THREE.LessEqualDepth）。默認(rèn) LessEqualDepth。
.stencilWrite Boolean 是否啟用模板測試/寫入。默認(rèn) false。
.stencilFunc Integer 模板比較函數(shù)（如 THREE.AlwaysStencilFunc）。默認(rèn) AlwaysStencilFunc。
.stencilRef Integer 模板參考值。默認(rèn) 0。
  1. 多邊形偏移
屬性 類型 描述
.polygonOffset Boolean 是否啟用多邊形偏移（解決深度沖突）。默認(rèn) false。
.polygonOffsetFactor Float 偏移因子。默認(rèn) 0。
.polygonOffsetUnits Float 偏移單位。默認(rèn) 0。
  1. 渲染控制
屬性 類型 描述
.side Integer 面渲染模式：THREE.FrontSide（默認(rèn)）、THREE.BackSide、THREE.DoubleSide。
.shadowSide Integer 陰影投射面（覆蓋 .side 設(shè)置）。默認(rèn) null。
.colorWrite Boolean 是否寫入顏色緩沖（可用于創(chuàng)建遮擋物）。默認(rèn) true。
.dithering Boolean 啟用顏色抖動(dòng)減少色帶。默認(rèn) false。
.toneMapped Boolean 是否受渲染器色調(diào)映射影響。默認(rèn) true。
.visible Boolean 是否可見。默認(rèn) true。
  1. 高級配置
屬性 類型 描述
.defines Object 自定義著色器宏定義（如 { MY_DEFINE: 1 }）。
.precision String 覆蓋渲染器精度（"highp"/"mediump"/"lowp"）。默認(rèn) null。
.forceSinglePass Boolean 強(qiáng)制雙面透明物體單通道渲染（解決植被等性能問題）。默認(rèn) false。
  1. 標(biāo)識與元數(shù)據(jù)
屬性 類型 描述
.name String 材質(zhì)名稱（非唯一）。默認(rèn)空字符串。
.uuid String 唯一標(biāo)識符（自動(dòng)生成）。
.userData Object 用戶自定義數(shù)據(jù)存儲(chǔ)對象。默認(rèn) {}。
.version Integer 材質(zhì)更新計(jì)數(shù)器（.needsUpdate 觸發(fā)時(shí)遞增）。

核心方法

  1. 生命周期管理
方法 描述
.clone() 返回材質(zhì)副本（淺拷貝紋理）。
.copy(material) 復(fù)制其他材質(zhì)的屬性到當(dāng)前材質(zhì)。
.dispose() 釋放 GPU 資源（需手動(dòng)調(diào)用）。
  1. 著色器擴(kuò)展
方法 描述
.onBeforeCompile(shader, renderer) 著色器編譯前回調(diào)（可修改著色器代碼）。
.customProgramCacheKey() 返回著色器緩存標(biāo)識（需配合 onBeforeCompile 使用）。
  1. 渲染鉤子
方法 描述
.onBeforeRender(renderer, scene, camera, geometry, object, group) 材質(zhì)渲染前回調(diào)（每幀執(zhí)行）。
  1. 序列化
方法 描述
.toJSON(meta) 將材質(zhì)轉(zhuǎn)換為 JSON 格式（含紋理等元數(shù)據(jù)）。

代碼示例

// 創(chuàng)建自定義材質(zhì)（禁用深度寫入，啟用混合）
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.5,
  depthWrite: false,
  blending: THREE.CustomBlending,
  blendSrc: THREE.SrcAlphaFactor,
  blendDst: THREE.OneMinusSrcAlphaFactor
});

// 克隆材質(zhì)
const clonedMaterial = material.clone();

// 釋放資源
material.dispose();

注意事項(xiàng)

  1. 性能優(yōu)化：禁用 .depthWrite 和 .colorWrite 可優(yōu)化 2D 疊加層渲染。
  2. 透明排序：透明物體按渲染順序（renderOrder）排序，可能產(chǎn)生視覺問題。
  3. 模板測試：需開啟 WebGLRenderer.localClippingEnabled 才能使用自定義裁剪平面。
  4. 著色器擴(kuò)展：onBeforeCompile 是高級功能，建議優(yōu)先使用 NodeMaterial 系統(tǒng)（WebGPU 方向）。

源碼位置：src/materials/Material.js

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容