目前為此建立的 3D 物件都是白色,你可以使用 fill
、stroke
等函式,決定 3D 物件的填滿或線條顏色,如果要貼圖呢?可以使用 loadImage
載入圖片,然後透過 texture
來貼到 3D 物件上:
texture
除了可以接受圖片之外,還可以是 createVideo
建立的影片,甚至是 createCapture
建立的視訊作為來源。
在上面的範例中,正立方體的六面分別被貼上了圖片…這是正立方體貼圖時的預設,然而若是球呢?每種內建的 3D 物件,預設會有不同的貼圖方式,你可以自行試試看,你沒辦法調整各自的預設貼圖方式,只能選擇適當的圖片來貼,通常就是有重複圖樣,且正好可以作為內建 3D 物件的皮膚。
有沒有調整貼圖方式的參數或函式呢?texture
本身沒有可調整的參數,然而有 textureWrap
與 textureMode
可以使用,只不過,這兩個指令對內建的 3D 物件,沒有太大的意義,因為內建的 3D 物件貼圖行為是固定的。
textureWrap
與 textureMode
主要用於〈自訂 3D 物件〉,因為在使用 vertex
時,其實可以指定 u
、v
參數的值,分別代表貼圖來源的座標,使用 u 與 v,是因為 x、y、z 符號已用於 2D 或 3D 座標軸,為了討論時避免混淆,才使用 u、v,表示指的是貼圖來源座標,也就是 UV 貼圖(UV Mapping)這名稱的來源。
例如,想為正立方體六面貼上不同的圖呢?這需要在繪製每一個面前,呼叫一次 texture
,改變貼圖來源。例如:
在呼叫 vertex
時,如果不指定 u
、v
,那麼會以貼圖來源原尺寸繪製,這時若圖片大於貼圖片,就看不到完整的圖片,上面的範例透過 textureMode
設定 NORMAL
,這表示將貼圖來源的大小,標準化為 0 到 1:
每個頂點指定其對應的貼圖座標,p5.js(底層的 WebGL)就會自行計算,該使用圖片的哪個像素來繪製;其實 textureMode
的預設值是 IMAGE
,也就是可以指定像素座標,只不過以上範例的圖片來源大小不一,為了省麻煩,標準化為 0 到 1,才設定 textureMode
為 NORMAL
,也因為將矩形的圖塞入正方形區域,圖片其實是有些變形的。
因為多面體通常不規則,指定的頂點通常不會是如上範例四個點,而會是三角形區域,例如,為正四面體貼圖:
如果你指定的 u
、v
,在 IMAGE
模式下,不是在圖片尺寸範圍內,或者在 NORMAL
下,超出 0 ~ 1 的範圍,這時就要注意 textureWrap
設定,預設是 CLAMP
,也就是取圖片邊緣像素延伸繪製,就像是將夾住彩色黏土的邊拉長那樣,若設為 REPEAT
,那就是重複拼貼,若設為 IMAGE
,那就是鏡像拼貼。
例如,若使用底下圖片作為貼圖來源:
你可以試著改變底下範例的 textureWrap
為不同的值,拖動滑鼠,滑鼠座標會用來計算 u、v,令 u、v 可能超過圖片尺寸範圍,看看不同值下會呈現什麼樣的效果: