發布於 2023-07-03

更新於 2023-07-03

程式

約891字 (5分鐘閱讀)

Three.js 材質的共有基本屬性

Title Image

Photo by ThreeJS on ThreeJS

前言 - 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設置多邊形偏移,用於渲染不同深度的多邊形。可以設置 polygonOffsetFactorpolygonOffsetUnits
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

Three.js 材質的共有基本屬性

https:///blog/72

作者

Kama

Read more from 程式
lightbox-image
Toggle Button - Red Pandas Icons by svgrepo.com

Copyrights © 2023 Kama, All Rights Reserved.