單品咖啡豆產品頁
拾霧珈琲 SHIWU
衣索比亞耶加雪菲 G1。把海拔、日曬工序、烘焙度這些數字，做成滾動時展開的產地敘事。
自主練習 2026
開啟實際網站 ↗
部署於 Vercel · 原始碼未公開
我的角色
品牌命名、產品敘事、3D 場景與全部前端實作。
技術挑戰
精品咖啡的規格全是抽象數字 — 海拔 2100 公尺、72 小時高架床日曬、中淺焙。這些數字對非咖啡人毫無意義，要讓它們變成看得懂的東西。
成果
產地資訊做成滾動敘事而非規格表，3D 場景襯托包裝本體。是九個 3D 產品頁中唯一一開始就備妥 og:image 的。
為什麼做這個
精品咖啡的規格是一串對外行人沒有意義的數字：海拔 2100m、72 小時高架床日曬、中淺焙、G1。
咖啡店的做法是寫在牌子上。我想試試把它們攤成滾動敘事。
技術重點
- 產地敘事：規格不是表格，是隨滾動展開的段落。
- Three.js r128：包裝本體與場景。
- og:image：這是九個 3D 產品頁裡唯一一開始就做了社群分享圖的。
附註
站上另有一篇技術文寫的是 Meridian Roasters — 那是另一個咖啡題材的專案，用影片 scrub 而非 WebGL。兩者題材相近但技術路線完全不同，別搞混。