在 Day 25 中，我們穿透了線性工作流、HDR 與 ACES Filmic 的色彩迷宮，讓地宮光影具備了底片般的溫潤質感。掌握了幾何、著色器、光影與色彩科學後，今天我們將把目光拉回本專案的核心靈魂——空間維度的轉換！

許多初次接觸 HD-2D 的開發者，常常會把關注點放在「像素畫得漂不漂亮」或「角色程式碼怎麼寫」；但在圖形學的維度上，真正決定 HD-2D 成敗的關鍵只有一個：

如何讓玩家的大腦，把一張張完全平面的 2D 像素圖片，看成一座深邃且具備實體厚度的 3D 地下城？

這正是《Three.js × WebGL 實戰》的精髓所在。HD-2D 並非單純的復古像素，而是一場精密的「視覺錯覺工程」——它利用 WebGL 的透視管線，將 2D 平面資源強行嵌入三維空間。今天我們就來拆解支撐起這場立體錯覺的三大圖形學基石！

一、透視投影相機（PerspectiveCamera）：微縮模型感的核心引擎

在 Three.js 中，要將 3D 世界投射到螢幕上，主要有兩種相機架構：正交相機（OrthographicCamera） 與 透視相機（PerspectiveCamera）。

傳統 2.5D 的局限：正交投影的「平面鎖死」

過去經典的斜 45 度視角遊戲（如《Final Fantasy Tactics》或《暗黑破壞神 2》）通常使用等軸測（Isometric）正交投影。

• 特性：光線完全平行，無論物體離相機多遠，1 單位的長度在螢幕上永遠佔據一模一樣的像素寬度。
• 為什麼正交相機做不出 HD-2D？
  因為缺乏「近大遠小」的幾何形變！在正交視角下，走廊前後完全等寬，縱向的石磚接縫是完全平行的直線；背景即使築起十層高牆，也不會向遠方收斂。大腦只會把它判定為「一張畫在斜角度上的精緻 2D 地圖」，無法產生身歷其境的立體深度。

HD-2D 的空間密碼：透視平截頭體（Frustum）

在我們的專案中，我們使用的是 THREE.PerspectiveCamera，並將鏡頭架設在 (player.x, 10, player.z + 18)、以約 28 度低俯角俯視主角：

const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 100);

透視相機模擬的是人類眼球的「錐體投影」：空間中的物體在螢幕上的投影大小，與它距離相機的深度成反比。

這帶來了三個至關重要的 3D 視覺特徵：

1. 地表消失線收斂（Vanishing Lines）：
   地面鋪設的石磚接縫不再是平行死線，而是隨著向北方延伸，自然地朝著視野中心遠處收縮。大腦接收到這種消失線訊號，會第一時間判定地表具備「向前無限延伸的縱深」。

2. 三維幾何側立面（Vertical Facets）：
   當相機以 28 度俯角觀察 3D 立方體牆面時，我們不僅能看到牆頂的平面，還能清楚看到垂直向下的牆面立面與陰影交界。這正是 2D 地圖永遠無法提供的「垂直幾何厚度」。

3. 長焦微距（Telephoto）微縮調校：
   如果相機視角（FOV）開得太大（例如 75°~90°），畫面邊緣會產生劇烈的廣角拉伸，將方正的像素格子扯成梯形畸變。我們選擇壓低視野角（FOV = 45°），將相機稍微向後拉遠，既保留了向遠方收斂的透視線，又營造出如同真實攝影中「微距長焦鏡頭」拍攝袖珍微縮模型盒的緊湊精緻感！

二、真正的三維物理視差（True 3D Parallax）：終結假圖層滾動

在傳統 2D 橫向捲軸或俯視角遊戲中，所謂的「視差滾動（Parallax Scrolling）」是一種人工偽造的技巧：美術畫了前景、中景、遠景三張圖層，工程師用程式碼讓遠景圖層以 0.3 倍速度滾動、中景以 0.6 倍滾動、前景以 1.0 倍滾動。

這種人工滾動一旦遇到視角旋轉或斜向移動，就會立刻露餡穿幫。

空間視角下的物理視差

在 Three.js 的 3D 環境中，我們完全不需要寫任何一行計算滾動速度的程式碼，所有的多層次視差全是純粹的幾何物理結果：

當角色奔跑、相機以指數阻尼向前平移時：

• 腳下的石磚飛速向後退；
• 中景的殘壁以適中節奏滑過身側；
• 遠方被移軸模糊虛化的北方城垛與散景壁燈，則以極其微小的角速度緩慢移動。

大腦的雙眼視覺皮層依賴這種「距離不同導致的相對運動角速度差」，不需要任何額外解釋，就能在瞬間繪製出場景的空間縱深維度！

三、空間錨定與深度緩衝（Z-Buffer）：讓紙片人扎根於 3D 世界

解決了相機與視差後，最棘手的問題來了：我們的主角是一張只有長寬、沒有厚度的 2D 平面 Sprite，他要如何在三維世界中正確「站立」？

深度測試（Depth Test）與遮擋關係

在 WebGL 渲染管線中，有一張看不見的畫布叫做 深度緩衝區（Z-Buffer / Depth Buffer）。
每次繪製一個像素，GPU 都會將該像素的相機距離寫入緩衝區：

• 如果後續繪製的物體比既有的像素更靠近相機，就覆蓋上去；
• 如果後續繪製的物體在既有物體的後方，就被遮擋剔除。

當我們的 2D 精靈主角走到 3D 石柱後方時：

• 石柱的 3D 幾何頂點距離相機較近，深度值較小；
• 主角精靈圖的像素雖然是一張向日葵看板，但其錨點世界座標（Position）落在石柱後方，深度值較大；
• GPU 的深度測試自動判定角色被遮擋，像素被自然裁切，主角完美「隱身」在石柱後面！

空間錨點（Pivot Point）的對齊哲學

2D 圖片在 Three.js 中預設的旋轉與位移中心是 (0.5, 0.5)（正中央）。
如果直接把圖片丟進 3D 場景：

• 當你設定 position.y = 1.0（石磚地面高度）時，角色的腰部會剛好切在地面上，下半身會被地面石磚活埋。

我們在配置 Sprite 時，必須將精靈錨點重新校準至 雙腳中心底端（center = (0.5, 0.0)）：

• 這樣一來，角色的 3D 空間座標 playerGroup.position 剛好對應他踏在地面上的足跡點。

• 當角色站在 y = 1.0 時，所有 2D 像素向上生長，配合我們在 Day 19 實裝的貼地高斯接觸陰影（y = 1.02），紙片人與 3D 地面的空間交接處徹底無縫咬合，消除了穿模與浮空感。

四、尺度統一（Metric Consistency）：微觀像素與宏觀 3D 空間的度量衡

在純 2D 遊戲中，長度的計量單位是「螢幕像素（Pixels）」；但在 Three.js 與 WebGL 的世界裡，計量單位是「世界單位（World Units，通常視為公尺）」。

如果兩者的尺度比例失控，畫面會產生嚴重的割裂感：

• 如果地磚一格代表 1 公尺，而一個 16x16 的角色精靈被放大成了 5 公尺高，角色看起來就像行走在玩具微縮模型上的巨人；
• 如果地磚貼圖太過密集，而角色像素顆粒太大，則會產生「粗糙角色貼在精細背景」的拼貼違和。

統一度量衡的換算公式

在專案中，我們建立了嚴格的空間網格標準：

• 地磚與牆壁：1 個網格方塊 = 世界座標中的 $1.0 \times 1.0$ 單位。
• 角色比例：為了配合俯視角下的微縮霸氣感，我們將角色高度定為 $3.8$ 單位（約等同於近 4 個石磚方塊的高度）。像素密度匹配：地磚材質採用 $16 \times 16$
• 像素對應 $1.0$ 單位（像素密度 $16\text{ px/unit}$）；角色的 Sprite 圖案在 $3.8$ 單位高度下，也精確維持相近的像素螢幕投影顆粒度。

當場景中的每一塊地磚、每一面牆壁的方塊尺度，都與角色的像素顆粒感維持相同的度量衡時，2D 像素藝術就不再是突兀的外來貼圖，而是與這座 3D 地宮共享相同的物理法則與空間秩序！

【本日結語】

今天我們穿透了維度的交界線，解析了 HD-2D 是如何運用純 2D 資源在 WebGL 畫布上建立空間錯覺：

• 透視平截頭體：利用消失線收斂與垂直立面幾何，打破正交投影的平面局限。

• 三維物理視差：藉由近景飛速掠過、遠景緩慢移動的角位移速度差，建立真實的深邃縱深。

• Z-Buffer 空間錨定：校準腳底中心點，讓向日葵廣告看板與三維障礙物產生真實的空間遮擋。

• 尺度度量衡統一：確立像素顆粒與三維幾何單位的對應關係，讓 2D 角色自然扎根於 3D 世界。

然而，單純把空間維度搭好，物體看起來依然只是一堆「灰色幾何方塊與彩色紙片」。是什麼真正賦予了這些冷硬幾何體厚重感與生命力？

在下一篇 Day 27 中，我們將探討立體感的終極靈魂——Three.js 即時光學架構如何賦予平面「三維體積」！我們將深入剖析冷暖三層光源模型、接觸陰影的界定力，以及光影乘積如何徹底消滅最後一絲塑膠貼紙感！