鐵人檔案
近年來 HD-2D 風格在遊戲界大放異彩，本系列將帶領讀者使用前端技術挑戰這項視覺饗宴！我們將以 Three.js 為核心，從零建構一個充滿復古魅力的像素地下城。內容涵蓋 3D 場景建置、2D 像素角色在 3D 空間的渲染技巧（Billboard），並深入探討 WebGL 底層概念，實作出關鍵的「即時光影系統」，為平面的像素賦予立體的生命力。無論你是對 3D 網頁開發好奇，還是想嘗試瀏覽器遊戲開發，都能跟著這 30 天的實戰，打造出專屬的 HD-2D 網頁互動體驗
隨著網頁技術的飛速發展，現代 Web 開發早已不再侷限於簡單的 JavaScript 互動與平面排版。身為一個對 16-bit 像素藝術與地下城風格情有獨鍾的開...
開發環境準備 要開始這場網頁上的地下城冒險，我們不需要太複雜的工具，只要有工程師的老朋友 VS Code 加上 Node.js 環境就足夠了。 這次我們選擇 V...
昨天我們將開發環境與 GitHub 備份都設定妥當了。今天的第一步，請在 VS Code 終端機輸入 npm run dev 並開啟本地伺服器。看著 Vite...
昨天我們在網頁上成功渲染出了一塊深色的 3D 地板，但作為一個開發中的地下城，我們需要能夠自由地從各個角度檢視場景。此外，純色的幾何體太過單調，今天我們要裝上「...
前幾天我們鋪好了像素地板，但它目前看起來毫無生氣。HD-2D 風格最迷人的地方，就在於「復古像素」與「現代光影」的強烈碰撞。今天我們要為這個空間導入 Three...
前幾天我們學會了控制 3D 空間，但如果只在一個小型的廣場外圍加上四道牆壁，會讓遊戲看起來像是一個封閉的箱子。當鏡頭帶到牆壁外時，甚至會看到破圖的黑色虛空，這絕...
昨天我們鋪設了一片 100x100 的廣大平原，作為未來地圖生成的基礎。然而，這塊畫布目前面臨一個物理限制：它是一塊絕對平坦的單一幾何體，無法呈現出《歧路旅人》...
在昨天的開發中，如果我們依賴手動輸入一個個數字來定義地圖，一旦地圖範圍稍微擴大，輸入數千個數據就會耗費大量時間與人力。更重要的是，在 3D 空間中，過小的手刻地...
在 Day 8 中，我們透過程式成功鋪設了 50x50 的龐大網格與走道地貌。然而，當你嘗試在 3D 空間中直接觀看這座地城時，會發現畫面邊緣的方塊產生了明顯的...
在前兩天的進度中，我們完成了 50x50 隨機地圖的資料鋪設，並架構了仰角約 28 度的 2.5D 長焦視角。然而，當我們滿懷期待地將繪製好的 16×16 像素...
