ThreeJs-03材質進階

Heymar-10發表於2024-11-25

一.uv貼圖

在3D計算機圖形學中,UV對映是一種將2D紋理對映到3D模型表面的方法。在這裡,“U”和“V”代表了2D紋理空間的座標,這與2D笛卡爾座標系統中的“X”和“Y”是類似的。在3D模型的每個頂點上,都會有一組對應的UV座標,它們定義了3D模型在這個頂點上的表面應當對應紋理影像的哪個部分。

UV座標通常被儲存在模型的頂點屬性中,並與其他屬性(如頂點位置、法線向量等)一起被傳遞到渲染管線中。在渲染過程中,畫素著色器會使用這些UV座標來從紋理中取樣顏色,然後用這些顏色來著色模型的表面。

UV座標的取值範圍通常是[0, 1],其中(0,0)對應紋理的左下角,(1,1)對應紋理的右上角。然而,也可以使用超出這個範圍的值,這通常會導致紋理的重複或映象,具體的效果取決於紋理的環繞模式(wrap mode)。

UV對映的主要挑戰之一是如何有效地將2D紋理對映到複雜的3D形狀上,以避免拉伸、壓縮或其他形式的失真。這通常需要專門的UV展開或UV拆分工具,以及一些手動的調整工作。

總的來說,UV屬性在3D場景中是非常重要的,它們定義瞭如何將紋理對映到3D模型的表面,從而極大地影響了模型的最終視覺效果。

解釋

uv可以理解為一個座標系,主要作用於給物體進行貼圖的

為什麼這一個貼圖貼上去,就剛剛好圖片在物體正中間不偏不倚

image-20241119213759699

這個鴨子使用很多個平面三角形組成,那麼為什麼用了這麼一張圖片他知道眼睛這裡用黑色,嘴巴那裡用稍微黑一點的

image-20241119213917384

image-20241119213946010

image-20241119213935994

舉例

建立一個平面幾何體,給上貼圖

image-20241119214048101

但是這個幾何體使用建立頂點的方式實現的

image-20241119214135181

再建立一個幾何體,不建立uv,直接給貼圖

image-20241119214217850

左邊就是有uv的,右邊沒有uv不知道怎麼貼圖就是白色

image-20241119214251515

之前用頂點,三個點是一個點的位置

image-20241119214429262

這裡建立uv座標,並且設定屬性的時候宣告兩個點是一個座標的位置

image-20241119214556859

image-20241119214602936

還可以把第四個點拉到下面來

image-20241119214653529

image-20241119214714272

image-20241119214719475

眼睛頂點

image-20241119214822927

image-20241119214832407

二.法向量

1.解釋

法向量就是投射於物體的一條直線,可以形成反射效果

image-20241120202053070

如果是快速建立的一個物體他會自動有法向量,但是透過頂點建立就沒有,所以在環境貼圖裡面就不能反射

image-20241120202154785

開啟法向量

image-20241120202222091

同時環境貼圖要設定每一個可以作用的材質

image-20241120202254224

GIF

除了自動計演算法向量也可以自己設定頂點

image-20241120202518117

image-20241120202524101

輔助線開啟

image-20241120202545762

image-20241120202600981

在3D計算機圖形學中,"法向量"(或簡稱為"法線")是一個向量,表示3D模型表面在某一點的方向。在每個頂點上,都會有一個關聯的法向量,這個向量通常被歸一化,也就是說它的長度為1。

頂點的法向屬性在很多計算圖形的領域都有應用,但最常見的用途是在光照計算中。當光源照亮一個3D模型的時候,每個表面的亮度取決於光線與表面的相對角度。這個角度可以透過比較光線方向和表面法向量來計算。這樣,即使表面的幾何形狀非常複雜,也可以透過使用每個頂點的法向量來進行準確的光照計算。

法向量通常在模型的建立過程中被計算出來,然後儲存在每個頂點的屬性中。對於有些表面,如平面或者球體,法向量可以透過簡單的數學公式來計算。但對於更復雜的幾何形狀,可能需要透過比如"法線對映"(normal mapping)等更復雜的技術來生成。

除了用於光照計算外,法向量也可以用於一些其他的圖形效果,如環境光遮蔽(ambient occlusion)、凹凸對映(bump mapping)、反射和折射等。總的來說,法向屬性在3D場景中是非常重要的,它們對於渲染真實感的影像有著關鍵的作用。

2.頂點轉換

也就是之前用的position、rotate、scale等不僅可以直接用方法,還可以用頂點的方式

初始頂點的位置

image-2024112020530270

想讓他移動x軸為4

image-20241120205325556

image-20241120205331878

3.包圍盒

什麼是包圍盒,比如這一個鴨子,有一個立方體框柱就是他的包圍盒

好處在於如果想去計算鴨子的大小,那麼會去計算很多個頂點很麻煩,但是如果他有一個包圍盒計算包圍盒的大小也就上下左右幾個頂點就可以了

image-2024112020580344

實現

image-20241120205834672

直接載入模型

image-20241120205926276

可以檢視這個物體的名字和id

image-20241120210018549

image-20241120210028155

image-2024112021003348

在匯入模型的回撥裡面

image-20241120210330617

但是此時的包圍盒會很大,因為他的縮放給的值很大

3.1 世界矩陣

這個時候就要用到世界矩陣,讓他的變換和本地的一樣比例

image-20241120210650583

image-2024112021071705

GIF

4.幾何體居中和獲取幾何體中心

有了包圍盒,可以快速讓一個模型居中

image-20241120211024724

image-20241120211036218

5.獲取多個物體包圍盒

加入有多個物體,想讓他們在一起形成一個大的包圍盒去操作

得益於包圍盒有這麼一個方法

image-20241120211613201

三個小球

image-20241120211630223

image-20241120211746532

image-20241120211753655

也可以快速直接計算

image-20241120211817719

image-20241120211826350

6.邊緣幾何體和線框幾何體

邊緣幾何體就是邊緣是經過計算得到,不再是每個平面都是用三角形組成,而線段幾何體就是之前的wireframe,將所有面用三角線組成

image-20241120212559953

拿到物體的幾何體,建立邊緣幾何體,要用到線段材質

image-20241120213019806

image-20241120212707824

此時方向不一致,那是因為這是直接拿到物體的頂點來建立的,得到的最原始的位置旋轉等,如果想要跟這個模型一模一樣,那麼需要複製到這個物體的矩陣

開啟建築物的矩陣,然後讓邊緣幾何體賦值建築物的矩陣,並且需要更新,decompose就是結構當前的資訊分別給到邊緣幾何體的位置、旋轉和縮放

image-20241120213222043

完全重合

image-20241120213351331

線段幾何體

image-20241120213426151

image-20241120213510063

如果一個模型過大,裡面很多物體都想變為邊緣幾何體,就可以透過遍歷,traverse專門獲取裡面的3D物體

image-20241120213834430

image-20241120213850093

GIF

相關文章