3D Island

專案介紹

使用 NextJS（App Router）、Typescript、ThreeJS、Tailwind、SCSS 開發。

• prod：https://three-3d-island.vercel.app/
• dev：https://dev-three-3d-island.vercel.app/

使用教學

開發與測試

1. 建立 .env.local 檔案，並參考 環境變數 資訊進行設定，設定方式參考 文件
2. 使用 yarn install 安裝環境依賴。
3. 接著，確認 node 版本 >= 18.17.0 後，使用 yarn dev 啟動服務，進行開發測試。
4. 開發完畢後，使用 yarn build 來建構正式環境程式，然後再使用 yarn start 來執行並驗證。

---

Project Directory Explanation (專案目錄結構說明)

|── components/       - React 元件，共用類型的元件
|   └── */            - 單一頁面與其相關的元件，會放置在以頁面為名稱的子資料夾底下
|── app/              - 頁面檔
|   └── layout/       - 頁面布局資訊
|   └── page/         - 首頁
|── constants/        - 常數
|── react-context/    - React hook: useContext
|── react-reducer/    - React hook: useReducer
|── styles/           - SCSS 檔案、theme
|── types/            - TypeScript 使用的型別定義
|── utils/            - 工具類 function
|── public/           - 靜態資源
|   |── icons/        - SVG icons
|   └── images/       - 圖片
|   └── models/       - 3D模型

---

Environment Variables (環境變數)

變數名稱	資料型態	初始值	變數說明
NEXT_PUBLIC_ENV	字串	'localhost'	環境設定

---

部屬

目前使用 Vercel 進行自動化部署，共有 dev、prod 兩個分支，需以發 PR 的方式合併分支。功能測試需於 dev branch 測試後，再 merge 進 prod branch。