生活随笔
收集整理的這篇文章主要介紹了
Three.js所有材质的属性及实例应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
材質（texture）
- 所有材質：
- THREE.MeshBasicMaterial
- THREE.MeshDepthMaterial
- 聯合材質
- THREE.MeshNormalMaterial
- 在單幾何體上使用多種材質
- THREE.MeshLambertMaterial
- THREE.MeshPhongMaterial
- THREE.MeshStandardMaterial
- THREE.MeshPhysicalMaterial
所有材質：
名稱描述
| MeshBasicMaterial（網格基礎材質 | 基礎材質，用于給幾何體賦予一種簡單的顏色，或者顯示幾何體的線框 |
| MeshDepthMaterial（網格深度材質） | 這個材質的使用從攝像機到網格的距離來決定如何給網格上色 |
| MeshNormalMaterial（網格法向材質） | 使用法向向量計算物體的表面顏色 |
| MeshLambertMaterial（網格Lambert材質） | 這是一種考慮光照影響的材質，用于創建暗淡，不光亮的物體 |
| MeshPhongMaterial（網格Phong材質） | 這是一種考慮光照影響的材質，用于創建光亮的物體 |
| MeshStandardMaterial（網格標準材質） | 這種標準材質采用“基于物理的渲染（PBR）”算法來繪制物體表面。能計算出表面與光線的正確互動關系，從而使渲染出來的物體更真實。 |
| MeshPhysicalMaterial（網格物理材質） | 這是MeshStandardMaterial（網格標準材質）的擴展材質，為光線反射計算模型提供了更多的控制 |
| MeshToonMaterial（網格卡通材質） | 這是MeshPhongMaterial（網格Phong材質）的擴展材質，使得物體渲染卡通化 |
| ShadowMaterial（陰影材質） | 專門用于接收用于陰影圖的特殊材質。在該材質中只有陰影圖像，非陰影部分為完全透明的區域 |
| shaderMaterial（著色器材質） | 允許使用自定義的著色器程序，直接控制頂點的放置位置和像素的著色方式 |
| LineBasicMaterial（直線基礎材質） | 用于THREE.line（直線）幾何體，用于創建著色的直線 |
| LineDashMaterial（虛線材質） | 這種材質和LineBasicMaterial（直線基礎材質）一樣，但是允許創建一種虛線的效果。 |
材質的共有屬性
屬性描述
| id（標識符） | 用于識別材質，并在創建材質時賦值。從0開始往上增加 |
| uuid（通用唯一識別符） | 這是生成的唯一ID，在內部使用 |
| name（名稱） | 可以通過這個屬性賦予材質名稱，用于調試的目的 |
| opacity（不透明度） | 定義物體的透明度。與transparent屬性一起使用。該屬性的賦值范圍從0到1 |
| transparent（是否透明） | 如果設置為true，Three.js會使用指定的不透明度渲染物體，如果設置為false，這個物體就不透明。如果使用alpha（透明度）通道的紋理，這個值應該設置為true。 |
| overdraw（過度描繪） | 當使用THREE.CanvasRender時，多邊形會被渲染的稍微大一點。當這個渲染器渲染的物體有間隙時，可以將這個屬性設置為true。 |
| visible（是否可見） | 定義該材質是否可見。如果設置為false，該物體在場景中就不可見 |
| side（側面） | 可以定義哪一面應用材質。默認值是THREE.FontSide（前面）。 |
| needsUpdate（是否更新） | 對于材質的某些修改，是否告訴THREE.js材質已經改變，如果設置為true，Three.js會使用新的材質屬性更新它的緩存 |
| colorWrite（是否輸出顏色） | 如果屬性值設置為false，則具有該材質的物體不會被真正的繪制到場景中，實際效果是該物體本身是不可見的，但其他物體被它擋住的部分也不可見 |
| flatShading（平面著色） | 該屬性控制物體表面法線的生成方式，從而影響光線效果。屬性值為true時，在兩個相鄰但不共面的三角形之間，光照會因為生硬過度而產生棱角，為false時則會產生平滑的過度效果。 |
| lights | 該屬性值為布爾值。控制物體表面是否接受光照。默認值為true |
| dithering（抖動） | 該屬性控制是否啟用顏色抖動模式，在一定程度上可以減輕顏色不均的問題。默認值為false |
| shadowSide（投影面） | 控制哪個面會投射陰影。默認值為null。當屬性值為null時。投射陰影的面按照如下原則推定：當side為THREE.FrontSide時，side為后面；當side為THREE.BackSide時，side為前面;當side為THREE.DoubleSide時，side為前面雙側 |
| vertexColors（頂點顏色） | 可以為物體的每一個頂點指定特有的顏色。默認值是THREE.NoColors。如果設置屬性值為THREE.VertexColors，則渲染時將使用THREE.Face3 vertexColors數組指定的顏色，為每一個頂點設定顏色。如果該屬性值為THREE.FaceColors，則會使用每一個面自己的顏色屬性來設定面的顏色。CanvasRenderer不支持該屬性，但WebGLRenderer能夠支持 |
| fog（霧） | 控制材質是否受霧的影響 |
融合屬性
- 融合屬性決定了我們渲染的顏色如何與它們后面的顏色交互
屬性描述
| blending（融合） | 該屬性決定了物體上的材質如何與背景融合。一般的融合模式是THREE.NormalBlending，在這種模式下只顯示材質的上層 |
| blendSrc（融合源） | 除了標準融合模式之外，還可以通過設置blendSrc、blendDst和blendEquation來創建自定義的融合模式。這個屬性定義了物體（源）如何與背景（目標）相融合。默認值為THREE.SrcAlphaFactor，即使用alpha（透明度通道）進行融合。 |
| blendSrcAlpha（融合源透明度） | 該屬性為blendSrc指定透明度，默認值為null |
| blendDst（融合目標） | 定義了融合時如何使用背景（目標），默認值為THREE.OneMinusSrcAlphaFactor，其含義是目標也使用源的alpha通道進行融合，只是使用的值是1（源的alpha通道值） |
| blendDstAlpha（融合目標透明度） | 該屬性為blendDst指定透明度，默認值為null |
| blendEquation（融合公式） | 定義如何使用不blendSrc和blendDst的值。默認值為使它們相加（AddEquation）。 |
THREE.MeshBasicMaterial
簡介
一種簡單的材質，不考慮場景中光照的影響使用這種材質網格會被渲染成簡單的平面多邊形可以顯示幾何體的線框
屬性
名稱描述
| color（顏色） | 設置材質的顏色 |
| wireframe（線框） | 設置這個屬性可以將材質渲染成線框，適用于調試 |
| wireframeLinewidth（線框線寬） | 如果打開了wireframe，這個屬性定義線框中線的寬度 |
| wireframeLinecap（線框線段端點） | 這個屬性定義了線框模式下頂點間線段的端點如何顯示。可選的值包括butt（平）、round（圓）和square（方）。默認值是round。在實際使用中，這個屬性的修改結果很難看出來。WebGLRenderer對象不支持該屬性。 |
| wireframeLinejoin（線框線段連接點） | 定義了線段連接點如何顯示。可選的值有round（圓）、bevel（斜角）、miter（尖角）。默認值為round。WebGLRenderer對象不支持該屬性。 |
實例應用
鏈接：https://blog.csdn.net/Potatoyou/article/details/127979023?spm=1001.2014.3001.5502
THREE.MeshDepthMaterial
簡介
這個材質使用攝像機到網格的距離來決定如何給網格上色可以將這種材質和其他材質結合，容易創建出逐漸消失的效果。這種材質只有兩個控制線框顯示的屬性
屬性
屬性描述
| wireframe | 該屬性指定是否顯示線框 |
| wireframeLineWidth | 該屬性指定線框的寬度（這個屬性支隊THREE.CanvasRenderer有效） |
實例應用
鏈接：MeshDepthMaterial
聯合材質
簡介
THREE.MeshDepthMaterial材質沒有用來設置顏色的屬性，一切都是由材質的默認屬性決定THREE.js庫可以通過聯合材質創建出可以擁有顏色，同時也是THREE.MeshDepthMaterial材質的物體如何聯合材質？
var cubeMaterial
= new THREE.MeshDepthMaterial();
var colorMaterial
= new THREE.MeshBasicMaterial({color:0xffffff,transparent:true,blending:THREE.MultiplyBlending
});var cube
= new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry
,[colorMaterial
,cubeMaterial
]);
cube
.children
[1].scale
.set(0.99,0.99,0.99);
- 當調用THREE.SceneUtils.createMultiMaterialObject()方法創建一個網格時，幾何體會被復制，返回一個網格組
- 如果沒有最后一行，渲染的時候畫面會有閃爍
- 通過縮小THREE.MeshDepthMaterial材質的網格，可以避免閃爍現象
- 這些方塊從MeshDepthMaterial對象獲得了亮度，從MeshBasicMaterial對象獲得了顏色
實例應用
鏈接：聯合材質
THREE.MeshNormalMaterial
簡介
使用法向向量計算物體的表面顏色法向量在three.js中可以用來決定光的反射，有助于將紋理映射到三維模型，并提供有關如何計算光照、陰影和為表面像素著色的信息
屬性
屬性描述
| wireframe | 該屬性指定是否顯示線框 |
| wireframeLineWidth | 該屬性指定線框的寬度（這個屬性支隊THREE.CanvasRenderer有效） |
實例應用
鏈接：MeshNormalMaterial
在單幾何體上使用多種材質
如果有一個方塊，有12個面（注意，three.js中只作用于三角形）。你可以用這種材質給方塊的每個面指定一種材質（例如不同的顏色）
實例應用
鏈接：多種材質
THREE.MeshLambertMaterial
簡介
用來創建暗淡的并不光亮的表面該材質非常易用，而且會對場景中的光源產生反應支持線框繪制屬性，可以繪制具有光照效果的線框物體效果看起來比較暗淡
屬性
名稱描述
| color（顏色） | 這是材質的環境光 |
| emissive（自發光） | 材質自發光的顏色。該材質雖然不會讓使用它的物體變成光源，但會使物體的顏色不受其他光源的影響（即使在場景中沒有光源的暗處，該物體表面的emissive顏色也可見，從而實現物體自發光。）該屬性的默認值為黑色。 |
創建
var meshLambertMaterial
= new THREE.MeshLambertMaterial({color:0xffffff});
實例應用
鏈接：MeshLambertMaterial
THREE.MeshPhongMaterial
簡介
創建一種光亮的材質可以在物體表面實現高光效果可以模擬塑料質感，也可以模擬金屬質THREE.js還提供了一個THREE.MeshPhongMaterial材質的擴展材質：THREE.MeshToonMaterial
屬性
名稱描述
| color（顏色） | 材質的環境色。與環境光源一起使用。這個顏色會與環境光提供的顏色相乘。默認值為白色 |
| emissive（自發光顏色） | 材質自發光的顏色。該材質雖然不會讓使用它的物體變成光源，但會使物體的顏色不受其他光源的影響（即使在場景中沒有光源的暗處，該物體表面的emissive顏色也可見，從而實現物體自發光。）該屬性的默認值為黑色。 |
| specular（高光顏色） | 該屬性指定該材質的光亮程度及高光部分顏色。如果將它設置成與color屬性相同的顏色，將會得到一個類似金屬的材質，如果將它設置成灰色（grey），材質將會變得像塑料 |
| shiness（高光度） | 該屬性指定物體表面鏡面高光部分的輪廓的清晰程度，越光滑的表面，高光部分越清晰，反之越模糊。該屬性的默認值為30 |
創建
var meshPhongMaterial
= new THREE.MeshPhongMaterial({color: 0xdddddd});
THREE.MeshStandardMaterial
簡介
這種材質使用更加正確的物理計算來決定物體表面如何與場景中的光源互動能夠更好的表現塑料質感和金屬質感的表面
屬性
名稱描述
| metalness（金屬感程度） | 該屬性控制物體表面的金屬感程度。0代表完全塑料質感，1代表完全金屬質感。默認值為0.5 |
| roughness（粗糙程度） | 該屬性控制物體表面的粗糙程度。在視覺上，它決定表面對入射光的漫反射程度。默認值0.5。當值為0時會產生類似鏡面的反射，為1時會產生完全的漫反射效果 |
THREE.MeshPhysicalMaterial
簡介
該材質與THREE.MeshPhongMaterial材質非常相似提供了對反光度的更多控制該材質與上述MeshStandardMaterial材質，在不動手實驗的情況下，很難確定什么樣的參數值才能最符合特定需求。因此最佳的實踐方法就是在程序里增加一個簡單的UI，一邊調節參數一邊觀察。
屬性
名稱描述
| clearCoat（清漆） | 該屬性控制物體表面清漆涂層效果的明顯程度。該屬性值越高，則清漆圖層越厚，其結果是clearCoatRoughness屬性帶來的影響越明顯。取值范圍是0-1，默認值0 |
| clearCoatRoughness（清漆粗糙程度） | 該屬性控制物體表面清漆涂層的粗糙程度。粗糙程度越高，漫反射越明顯。該屬性需要與clearCoat屬性配合使用。取值范圍0-1，默認值0 |
| reflectivity（反光度） | 該屬性用于控制非金屬表面的反光度，因此當metalness（金屬感程度）為1或接近1時該屬性的作用很小。取值范圍時0-1，默認值0.5 |
總結
以上是生活随笔為你收集整理的Three.js所有材质的属性及实例应用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
