threejs學習筆記 材質

2021-08-14 08:51:47 字數 2131 閱讀 5796

meshbasematerial//(網格基礎材質)

//meshbasematerial(網格基礎材質)是一種非常簡單的材質,這種材質不會考慮光照的影響。

//使用這種材質網格備渲染成簡單的平面多邊形,可以用它賦予幾何體一種簡單的顏色,並且可以顯示幾何體的線框。

meshdepthmaterial//(網格深度材質)

//meshdepthmaterial(網格深度材質)使用該材質的物體的外觀不是由某個材質屬性決定的,而是由物體到相機的距離決定的,

//離相機越近越亮,離相機越遠越暗。該材質的屬性很少,沒有設定物體顏色的屬性。如果想改變物體的顏色,就需要建立多材質的物體

meshnormalmaterial//(網格法向材質)

//meshnormalmaterial(網格法向材質)這是一種簡單的材質,通過法向量來對映rgb顏色。每個法向量不同的面都會賦予不同的顏色。

meshfacematerial//(網格面材質)

//meshfacematerial(網格面材質)這是乙個容器,可以為幾何體每乙個面指定不同的材質。比如乙個立方體有六個面你可以為每個面指定乙個材質。

meshlambertmaterial//(網格朗伯材質)

//meshlambertmaterial(網格朗伯材質)用於建立看上去暗淡的、不光亮的表面,可以對光源產生陰影的效果。

meshphongmaterial//(網格phong式材質)

//meshphongmaterial(網格phong式材質)用於建立光亮表面的材質。可以產生陰影的效果。

shadermaterial//(著色器材質)

//shadermaterial(著色器材質)該材質是最複雜的一種材質,可以使用自己定製的著色器。該材質是最複雜的一種材質,可以使用自己定製的著色器。

linebasicmaterial//(直線基礎材質)

//linebasicmaterial(直線基礎材質)這種材質可以用於直線著色

linedashedmaterial//(虛線材質)

//linedashedmaterial(虛線材質)這種材質可以用於虛線線著色

//材質的基礎屬性

//id(識別符號) name(名稱) opacity(透明度) transparent(是否透明) voerdraw(過度描繪)

//visible(是否可見) side(側面) needsupdate(是否重新整理)

//材質的融合屬性

//blending(融合) 該屬性決定物體上的材質如何與背景融合。一般的融合模式是three.normalblending,在這種模式下只顯示材質的上層

//blendsrc(融合源) 除了使用標準融合模式外,還可以通過設定blendsrc、blenddst和blendequation來建立自定義的融合模式。這個屬性定義了該物體(源)如何與背景(目標)相融合。預設值為three.srcalphafactor,即使用alpha(透明度)通道進行融合

//blenddst(融合目標) 這個屬性定義了融合時如何使用背景(目標),預設值為three.oneminussrcalphafactor,其含義是目標也使用源的alpha通道進行融合,只是使用的值是1(源的alpha通道值)

//blendequation(融合公式) 定義了如何使用blendsrc和blendddst的值。預設值為使它們相加(addequation)。通過使用這三個屬性,可以建立自定義的融合模式

//材質的高階屬性

//depthtest 這是乙個高階webgl屬性。使用這個屬性可以開啟或關閉gl_depth_test引數。此引數控制是否使用畫素深度來計算新畫素的值。通常情況下不必修改這個屬性。

//depthwrite 這是另外乙個內部屬性。這個屬性可以用來決定這個材質是否影響webgl的深度快取。如果你將乙個物體用作二維貼圖(例如乙個套子),應該將這個屬性設定為false。但是,通常不應該修改這個屬性。

//polygonoffset、polygonoffsetfactor和polygonoffsetunits 通過這些屬性,可以控制webgl的polygon_offset_fill特性。

//alphatest 可以給這個屬性指定乙個值(從0到1)。如果某個畫素的alpha值小於該值,那麼該畫素不會顯示出來。可以使用這個屬性移除一些與透明相關的毛邊

threejs學習筆記 10

1 webgl的原生介面是不帶陰影功能的,而threejs對陰影做了封裝,簡單設定幾個引數就可以實現陰影了。renderer.shadowmapenabled true light.castshadow true cubemesh.castshadow true plane.receiveshado...

threejs學習筆記 6

1 cylindergeometry類是用於設定圓柱的,接收上截面直徑 下截面直徑 高度 截面數 是否封頂蓋這幾個引數。但事實上,如果將截面數設定為乙個比較小的數字,比如3 4之類的,就完全看不出是個圓柱了!只有將截面數設得比較大時,才像個圓柱。如果將上截面直徑設為0,可以成為乙個錐體。是否封蓋這個...

threejs學習筆記 3

點選canvas區域,可以停止方塊的轉動,再次點選開啟轉動。這次的練習主題是貼紋理,不再是簡單的放個顏色了。1 紋理的實現是通過material實現的,具體 如下 var mapurl a.png map three.imageutils.loadtexture mapurl material ne...