隨著網頁技術的飛速發展，現代 Web 開發早已不再侷限於簡單的 JavaScript 互動與平面排版。身為一個對 16-bit 像素藝術與地下城風格情有獨鍾的開發者，我突發奇想：既然現在有如此強大的前端渲染技術，為何不親手打造一個專屬於自己的微型地下城互動場景呢？畢竟，能突破瀏覽器的限制，在網頁上實現心中那些遊戲級的酷炫視覺特效，一直是我最渴望且也是十分有趣的事情！

我們最終的目標很明確：建立一個 3D 微縮地下城，把 2D 像素主角放進去，並且在角色手上綁定一盞動態光源。當角色在場景中走動時，光影會自然地跟隨，照亮周圍的牆壁與物件。 我們要把平時畫像素圖時對色彩調色盤、自然陰影與光照技巧的講究，這次全部交給程式碼來即時運算！

什麼是 Three.js？

簡單來說，瀏覽器有一個用來繪製 3D 圖形的底層 API 叫做 WebGL，但它的語法非常艱澀，光是畫一個彩色的三角形可能就要寫上百行包含矩陣數學的程式碼。而 Three.js 就像是一個強大的翻譯官，它把這些複雜的底層數學全部封裝起來，提供我們一套非常直覺、好懂的 JavaScript API，讓我們能像當導演一樣，輕鬆地在網頁上打光、架攝影機、擺放模型。

Three.js 渲染的 3D 模型與動畫. 來源： Three.js / three.js examples

空間資料視覺化與粒子系統. 來源： Saurabhkumar Singh / Getty Images

為什麼選擇 Three.js？

你可能會問，要做遊戲場景為什麼不用 Unity？
因為我們的戰場在「現代網頁 (Modern Web)」。Three.js 極度輕量，不需要使用者下載龐大的遊戲主程式。透過它，我們能輕易突破傳統網頁平面的排版限制，實現跨平台的 3D 視覺張力，把這種帶有復古魔法感的技術展示，直接透過一個網址分享給全世界。

【本日結語】

萬事起頭難，但只要確立了方向，這趟地下城探險就已經成功了一半。今天我們釐清了這 30 天的破關目標，也認識了接下來要並肩作戰的得力助手——Three.js。明天，我們將正式拿起開發者的「鐵鎬」，開始搭建我們的專案營地，把所有需要的環境與套件準備就緒。準備好迎接滿滿的程式碼了嗎？我們 Day 2 見！