在 Day 8 中，我們透過程式成功鋪設了 50x50 的龐大網格與走道地貌。然而，當你嘗試在 3D 空間中直接觀看這座地城時，會發現畫面邊緣的方塊產生了明顯的透視形變——靠近畫面邊緣的物體被嚴重拉扯，遠處的比例也迅速縮小。

在 Three.js 中，預設的透視攝影機往往採用 50 度甚至更寬的視野（FOV），這類廣角鏡頭會破壞 2D 像素藝術（Pixel Art）特有的平行對稱感。今天我們要透過光學壓縮的原理，設定一組專屬於 HD-2D 的相機幾何參數，並建立一套可即時跟隨目標的偏移量架構與視窗自適應監聽機制

【Step 1：收窄視野至 FOV 26°——模擬長焦鏡頭的光學壓縮】
在攝影學中，長焦鏡頭（窄視野）能夠產生顯著的「空間壓縮感」，拉近遠景與近景的距離，使遠近物體的大小差異減小。這正是《歧路旅人》等 HD-2D 作品營造「立體微縮模型」質感的關鍵技術。

我們在宣告 THREE.PerspectiveCamera 時，將第一個參數 FOV（垂直視野角度）精準設定為 26 度，搭配當前視窗的寬高比，並將近截面與遠截面分別設定為 0.1 與 1000，隨後加入場景中。

const sizes = { width: window.innerWidth, height: window.innerHeight }; //
// 視角參數：改為經典 HD-2D 平視低仰角 (FOV 26°)，鏡頭放低以看到更多角色正面與牆面立體感
const camera = new THREE.PerspectiveCamera(26, sizes.width / sizes.height, 0.1, 1000); //
scene.add(camera); //

【Step 2：定義 2.5D 固定平俯視角——相機目標與偏移向量】
很多開發者在做 2.5D 俯視視角時，習慣將相機放在 45 度或 60 度的俯角。但如果俯角過大，玩家在畫面上大多只會看到角色的「頭頂」和牆壁的「頂部」，完全浪費了精心繪製的角色正面像素與立面磚牆。 為了展現立體建築與角色的挺拔身姿，我們設計了一組「平視低仰角」的相機座標系統。我們宣告 cameraTarget 與 cameraOffset 兩個向量，分別代表相機的「焦點目標」與「相對目標的空間偏移」。

// 2.5D 固定平俯視角：目標設在角色上半身高度 (y=0.8)，相機高度 Y 壓低至 8.5
// 視角仰角約 28 度，大幅減少由上往下看到頭頂的比例，呈現角色的正面與挺拔立體感，且完全不露虛空
export const cameraTarget = new THREE.Vector3(0, 0.8, 0); //
export const cameraOffset = new THREE.Vector3(0, 8.5, 16); // 經典平視 HD-2D 偏移

camera.position.copy(cameraTarget).add(cameraOffset); //
camera.lookAt(cameraTarget); //

透過 camera.position.copy(cameraTarget).add(cameraOffset) 將相機放置在精確的向量合成位置，再使用 camera.lookAt(cameraTarget) 確保鏡頭中心隨時對準目標點。

【Step 3：視窗自適應縮放（Resize Event Listener）】
Web 遊戲與原生遊戲不同，使用者可能隨時拉動瀏覽器視窗、切換全螢幕或改變解析度。如果沒有即時更新相機的投影矩陣與渲染器尺寸，畫面就會被強制拉伸變形，導致像素失去等比正方形的特質。

我們在全域註冊 resize 事件監聽器，一旦視窗大小改變，便自動重構幾何投影參數

// 視窗自適應縮放
window.addEventListener('resize', () => {
  sizes.width = window.innerWidth; 
  sizes.height = window.innerHeight; 
  camera.aspect = sizes.width / sizes.height; 
  camera.updateProjectionMatrix(); 
  renderer.setSize(sizes.width, sizes.height); 
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); 
});

【本日結語】
透過今天的調整，我們為地城確立了標準的 2.5D 平視低仰角視線，徹底解決了視角的問題。這套 cameraTarget 與 cameraOffset 的向量結構，也為日後角色加入後的「鏡頭平滑跟隨」做好了準備[cite: 9]。

接下來，我們將深入像素材質的核心——解決貼圖模糊的濾鏡問題，並透過多面材質陣列（Multi-Material）將方塊的「頂面壓頂石」與「側面石磚」徹底分離，讓地下城更有感覺 !