〈3D 入門〉中談過,相機不過就是種比喻,因為它擁有可以調整觀察的位置、方向等參數,除了相機之外,還有其他調整觀察的方式。
3D 物件是繪製於一個立體空間之中,就 p5.js 的觀點來看,這個空間就是觀察範圍,而預設的座標範圍是以畫布大小來決定,在 x 軸的最小座標是 -width / 2
,最大為 width / 2
,在 y 軸的最小是 -height / 2
,最大為 height / 2
,在 z 軸的最小座標為 -max(width, height) / 2
,最大是 max(width, height) / 2
,3D 物件的資訊超出這個範圍的就不會繪製。
因為預設的觀察範圍與畫布大小,在尺寸上是一比一對應的,因此基本上,你繪製的 3D 物件,在不改變立體空間大小的情況下,只要用畫布的 width
、height
來作為邊界判斷,就可以決定 3D 物件畫出來的大小、位置等。
有時候,你不一定想要一比一的對應,例如,在畫布尺寸不變下,你可能會自行縮小 3D 物件尺寸(例如,100 變為 50),採用更小的座標單位(例如,從 1 變為 0.5),以便呈現更大的場景。
相對於這個想法,就是就是重新定義空間座標範圍,例如,為 x 軸 -width
至 width
,在 y 軸 -height
至 height
等,如此一來,不用改變 3D 物件大小,也不用自行採用更小的座標單位,因為畫布尺寸不變,相當於擴大觀察範圍,看到的 3D 物件就會變小。
若是縮小空間座標範圍,相當於縮小觀察範圍,這時將觀察到的物件繪入原尺寸畫布,看到的 3D 物件就會變大,如果立體空間不足以繪製 3D 物件,那 3D 物件超出立體空間的部份就不會繪製。
簡單來說,就相當於觀察的視野變大或變小,這種觀察方式被稱為正交投影(Orthogonal projection)。
為了能自訂觀察範圍,p5.js 提供了個 ortho
,它擁有 left
, right
、bottom
,top
、near
、far
等參數,left
是觀察範圍可用的最左邊界的座標值(負值),right
是最右邊界座標值(正值),top
是最上邊界座標值(正值),bottom
是最下邊界座標值(負值),near
與 far
不是座標值,near
是觀察範圍與投影面(也就是畫布)近的那面之距離,far
是遠的那面之距離:
可以使用以下的範例來驗證上述的說明:
ortho
的 near
與 far
預設為 0
與 max(width, height)
,因此以上範例沒有指定,因為觀察範圍足以涵蓋立方體,實際上 left
, right
、bottom
,top
不用設定各自相反數,或比例放大縮小,因為 left
, right
、bottom
,top
、near
、far
會用來計算觀察範圍的中心,然後 3D 物件的座標資訊,會轉換為相對於觀察範圍中心點之座標,這部份可參考〈正交投影矩陣〉)。
ortho
可以跟 camera
結合使用(底層是兩個轉換矩陣的運算),這時可以想像,相機與觀察範圍的近面是連動的:
如果你移動相機,觀察範圍也會跟著一起動:
因此要注意觀察範圍是否涵蓋 3D 物件,例如,底下將相機拉遠的話,只會看到立方體的一部份在轉:
實際上,p5.js 預設使用透視投影(Perspective projection),這可以讓 3D 物件近相機的部份看來比較大,離相機遠的看來比較小,這將在下一篇文件再來看看…