開發環境準備

要開始這場網頁上的地下城冒險，我們不需要太複雜的工具，只要有工程師的老朋友 VS Code 加上 Node.js 環境就足夠了。

這次我們選擇 Vite 來作為專案建置工具。在開發 3D 場景時，我們會頻繁地微調光影參數與相機角度，Vite 極快的啟動與熱更新（HMR）速度，能讓我們在每次存檔時，畫面瞬間更新，完全不需要等待。

Node.js下載

官網:https://nodejs.org/zh-tw/download

確認版本

node -v

初始化專案與版控

打開 VS Code 的終端機（或 Git Bash），我們直接用指令來召喚 Vite 的專案生成器。請依序執行以下步驟：

npm create vite@latest . -- --template vanilla

輸入指令後看到網址就是這次專案實作的實際位置了

Three.js 套件安裝

確認開發環境沒問題後，開始安裝本次專案最重要也是將來每一天都會接觸到的套件

npm install three

安裝成功:

【本日結語】
看著終端機順利跑完安裝指令，並且在瀏覽器中亮起那顆測試用的方塊，是不是有一種難以言喻的成就感？今天我們成功架設了 Vite 開發環境，並將 Three.js 核心套件與必要的擴充工具都安裝到位了。這座「開發營地」將是我們未來 28 天揮灑創意的基地。明天，我們就要正式清除這個預設的方塊，開始載入我們自己的像素素材，為這座微型地下城鋪上第一塊磚。各位冒險者，記得把今天的進度存檔 (git commit)，我們 Day 3 繼續往地下城深處邁進！