程序化 3D 滾動導覽
士林夜市五大名物
五種夜市小吃，五個獨立的 Three.js 場景，全部用幾何體長出來，沒有一張貼圖。
自主練習 2026
開啟實際網站 ↗
部署於 Vercel · 原始碼未公開
我的角色
五個場景的 3D 建模邏輯、滾動鏡頭、以及零依賴的靜態伺服器，全部獨立完成。
技術挑戰
食物是最難用幾何體做的東西 — 章魚燒的焦痕、珍珠的透光、雪花冰的鬆散，都不是幾何形狀能直接表達的。要在單檔 Three.js 的限制下，只靠材質參數把「好吃」做出來。
成果
五個小吃各自一個獨立場景，從 r128 遷移到 ESM 版本，用 RoomEnvironment 建立環境反射、selective bloom 只讓該亮的地方亮、clearcoat 做出食物表面的油光。
為什麼做這個
想做一件台灣的東西。3D 產品頁滿街都是球鞋和手錶，沒人做鹹酥雞。
五個小吃，五個獨立場景，共用一支零依賴的 Node 靜態伺服器。
技術重點
- 零貼圖：所有質感靠材質參數，不用任何 texture 檔。
- r128 → ESM 遷移：舊版 Three.js 的 script tag 寫法換成 importmap + ESM。
- RoomEnvironment：不用 HDR 檔就有環境反射。
- Selective bloom：只有該發光的地方發光，不是整個畫面糊成一片。
技術拆解全文見 單檔 Three.js 也能做高質感：我把士林夜市小吃重寫成程序化 3D 滾動網站（該文聚焦章魚燒這一站）。
收錄的 5 個子作品
- 章魚燒 主場景，柴魚片飄動與焦痕材質是重點，技術文完整拆解這一站。
- 珍珠奶茶 珍珠的半透光與液體分層。
- 大雞排 酥脆表面的凹凸與油光。
- 芒果雪花冰 鬆散冰體的堆疊與次表面散射感。
- 臭豆腐 蒸氣粒子與泡菜的色彩對比。