羊貝貝的小屋
羊貝貝的小屋是一個 3D 互動網頁，也是一個可以寄羊年電子賀卡系統。
主角「羊貝貝」（baaaaa）是一隻約 2 頭身的小羊，住在粉嫩色系的剖面娃娃屋裡，就算沒人操作，牠也會自己寫卡片、吃點心、讀書、午睡、織毛線。訪客可以幫牠換裝，讓牠寫一張賀卡，用 LINE 寄給朋友；收件人拆完信，也能回寄一張自己的小羊卡。這樣就形成一個「寫卡 → 分享 → 收卡 → 回卡」的循環。 Sui 獨立完成整個專案的角色設定、像素版與 3D 造型探索、three.js 建模、角色動態與行為系統、寫卡與收卡的介面流程，以及部署。開發過程大量使用 Claude Code Opus 5.5 協作，Sui 負責定方向、定規格、審視覺，並把整套做法整理成可以重複使用的 Prompt 指南。
專案目標
- 作品集展示：用一個能實際操作的小產品，完整呈現角色設計、3D 建模、動態與互動開發的能力。
- 節慶傳播：讓收件人「回一張卡」帶進新訪客，形成自然擴散。
- 療癒陪伴：小屋本身就是「活的」，什麼都不做也讓人想多看一下。
視覺風格
視覺方向是剖面娃娃屋＋粉嫩霧面玩具。所有物件只能從同一份色票（materials.js）取色，整體才不會亂。
- 字體：Zen Maru Gothic（圓體標題）、Montserrat（英文小標）
- 介面：奶油白圓角卡片、柔和陰影
- favicon：羊貝貝的頭像
技術重點
1. 用程式建模，不用外部 3D 檔
整間小屋和羊貝貝都在程式裡用基本幾何組成（圓角方塊、球、膠囊、圓環），沒有載入任何 .glb 模型。色票和比例都能直接在程式裡統一調整，改了立刻熱重載看到結果。
2. 平滑的下半身網格
身體、短褲和褲管原本是好幾塊幾何拼起來的，接縫很明顯。後來改用 SDF＋Marching Cubes 生成一整塊平滑網格，再蒙皮到身體和雙腳的骨架；衣服的分色在 shader 裡依高度決定，看不出接縫。
3. 姿勢與自發動作分開
每個行動只負責設定「目標姿勢」（sheep.pose：坐下程度、手、頭、身體前傾、眼睛、耳朵），角色每一格會平滑過渡到目標，再疊上呼吸、眨眼、耳朵抖動、走路擺動。新增行動時只要描述姿勢，動作自然會是軟的。
4. 狀態機＋A* 尋路
brain.js 是一個簡單的狀態機：待機 → 走路 → 做事 → 起身 → 待機。走路時用格子 A* 尋路，避開每件家具宣告的圓形障礙範圍。
5. 可擴充的結構
- 一件家具一個檔案，匯出 { id, label, action, build() }，build() 回傳模型、使用位置和障礙範圍
- 一個行動一個檔案，匯出 enter / update / exit 等，加進清單後底部按鈕會自動出現
- 新增鋼琴、彈琴這類內容，不必動到主程式
6. 不用後端的卡片連結
原型把卡片內容編成 base64url JSON 放在網址 #card=… 裡，不需要伺服器。讀取時只保留已知欄位並依字數上限截斷，避免被塞奇怪的資料。正式版會改成存進資料庫，網址只放隨機後綴。
Tech Stack
建置後的 JS 約 165 KB gzip，大部分是 three.js。
1. 前端（核心）
2. 渲染設定
3. 素材與工具
Want to work with Sui?
