1. 程式人生 > 實用技巧 >Three.js 點、線、網路模型及材質梳理

Three.js 點、線、網路模型及材質梳理

模型

點模型Points、線模型Line、網格網格模型Mesh都是由幾何體Geometry和材質Material構成。

1、點模型Points:就是幾何體的每一個頂點資料渲染為一個方形區域,方形區域的大小可以設定。

2、線模型Line:兩點確定一條直線,線模型Line就是使用線條去連線幾何體的頂點資料。

a、線渲染(Line)

b、閉環線渲染(LineLoop) 。連線的時候會閉合把第一個頂點和最後一個頂點

c、間斷性渲染(LineSegments) 。第1、2點確定一條線,第3、4頂點確定一條直線,第2和3點之間不連線

3、網格模型Mesh:三個頂點確定一個三角形,通過三角形面繪製渲染幾何體的所有頂點,通過一系列的三角形拼接出來一個曲面。

如果設定網格模型的wireframe屬性為true,所有三角形會以線條形式繪製出來。

材質

關於材質、反射詳細的說明參考

1、點材質:PointsMaterial,通常使用點模型的時候會使用點材質PointsMaterial

.size屬性可以每個頂點渲染的方形區域尺寸畫素大小。

2、線材質:通常使用使用Line等線模型才會用到線材質。

  a、基礎線材質(LineBasicMaterial)

  b、虛線材質(LineDashedMaterial)

3、網格材質:

  a、基礎網格材質物件(MeshBasicMaterial):不受帶有方向光源影響,沒有稜角感。

  b、網格Lambert材質(MeshLamberMaterial) :一種非光澤表面的材質,沒有鏡面高光。可以實現漫反射光照計算,物體表面分界的位置有稜角感。

  c、高光網格材質(MeshPhongMaterial):除了MeshLamberMaterial功能外,還可以產生高光效果(鏡面反射)。

  d、PBR材質:Physically-Based Rendering(基於物理的渲染)的簡稱 。比MeshPhongMaterial效果更好。

    i、標準網格材質(MeshStandardMaterial):一種基於物理的標準材質,使用金屬粗糙度工作流程。

    ii、物理材質網格(MeshPhysicalMaterial):MeshStandardMaterial的擴充套件,能夠更好地控制反射率

  e、深度網格材質(MeshDepthMaterial):一種按深度預測幾何體的材質。深度基於相機遠近平面。白色最近,黑色最遠。

  f、法線網格材質(MeshNormalMaterial):一種把法向量對映到RGB顏色的材質。

4、精靈材質SpriteMaterial:一種使用Sprite的材質。