春男塔羅
會看到這個作品的你，不知道最近有沒有一種「舊的階段即將結束，新的事物正在醞釀」的感覺？
2026 年 春分前夕，集體意識瀰漫著「渴望蛻變與全新開始」的能量。當我嘗試抽出塔羅牌卡指引時，發現這三張牌竟然不約而同地，全都在訴說著「轉變與新生」的訊息。正好，我也迎來一個「全新開始」——我開始著手設計想做很久的「春男塔羅牌」了！ ❤️
春男的塔羅小屋是一個 3D 互動塔羅網頁，78 張牌都是會動的小劇場。
主角「春男」（Haruo）是一隻披著星星斗篷的藍貓，住在夜空色的剖面娃娃屋裡。就算沒人操作，他也會自己觀星、讀書、暝想、點蠟燭淨化，或坐在水晶球前聚氣。訪客可以打開衣櫃幫他換斗篷、毛色和帽子，也可以點水晶球請他占卜：默念一個問題，抽三張牌，分別代表過去（問題）、現在（行動）、未來（可能結果）。
每張牌翻開後都是一個小舞台，春男和他的朋友在裡面演出牌義，點牌裡的春男他還會跳一下。看完可以把牌存成圖片分享到 IG、Threads 或 LINE。
Sui 獨立完成整個專案的角色與配角設定、78 張牌的場景設計、three.js 建模、角色動態與行為系統、占卜流程與牌義文字、中英日三語版本，以及部署。開發過程大量使用 Claude Code Opus 5.5 協作，Sui 負責定方向、定規格、審視覺，每張牌逐張檢查過動作和構圖。
專案目標
- 作品集展示：延伸羊貝貝的小屋，用一整副牌展示角色、場景與動態的量產能力：同一套角色和道具系統，做出 78 個各不相同的小劇場。
- 讓塔羅變可愛：牌義只有正位、口吻溫和，不接 AI、不寫算命式結論，讓第一次接觸塔羅的人也敢抽。
- 分享帶來新訪客：抽到的牌可以存成直式圖卡分享，三種語言各有自己的網址和分享預覽圖。
視覺風格
視覺方向是夜空剖面娃娃屋＋霧面玩具，和羊貝貝的小屋同一個世界，但從粉嫩的白天換成深藏青的夜晚。所有物件只從同一份色票（materials.js）取色。
- 字體：Huninn（jf 粉圓，中文圓體）；英文 Fredoka、日文 Zen Maru Gothic／M PLUS Rounded 1c
- 介面：奶油白圓角卡片、柔和陰影；占卜頁是夜空背景
- 燈光：預設是夜晚（月光、燭光、燈串、水晶球），點新月壁燈切換開燈
- favicon：用春男模型拍的星夜方塊
技術重點
1. 78 張牌都是程式畫的 3D 小劇場
每張牌是一個 three.js 小舞台，角色、道具、背景都用程式組出來，一輪 12 秒循環演出。配角有粉紅兔、迷你春男、天使春男、小惡魔（影子春男）和小白狗；16 張宮廷牌由春男變裝，騎士騎胖胖的玩具馬。共用的角色、道具和花色素材拆成模組，每張牌只寫自己的劇本，各自 2～5 KB、需要時才載入。
2. 自動檢查道具有沒有穿過頭
春男是大頭短手，舉起來的道具很容易插進頭裡。我寫了一支檢查腳本，逐格跑完每張牌的 12 秒循環，把每個道具的頂點拿去比對春男身體的 SDF，找出穿模的那幾格再修正。規則是道具可以擋住臉，但要在頭的前面，不能穿過頭。
3. 小屋和牌卡共用同一個角色
小屋裡的春男、牌卡裡的春男、載入畫面、404 頁和「回到最上面」的春男，都 import 同一份模型與姿勢系統。衣櫃換的造型會同步到角色卡頭像和關於頁。
4. 狀態機＋A* 尋路＋行動模組
沿用羊貝貝小屋的大腦：待機 → 走路 → 做事 → 起身 → 待機，用格子 A* 繞開家具。觀星、讀書、暝想、淨化、占卜、聚氣、換裝各是一個檔案；「隨意」模式下他會自己挑事情做。
5. 夜晚燈光
很暗的藍紫環境光，加上從窗戶斜照進來的月光（聚光燈打出窗形的光斑），每支蠟燭、燈串和水晶球各有一盞跟著燭火搖曳的點光源。占卜時水晶球從白光變藍光。
6. 三語版本
中文頁是原稿，build 時依對照表產生 /en/、/ja/ 頁面，各有自己的 hreflang 和分享預覽圖；78 張牌義都翻成英文與日文，只載入目前語言那一份。牌面上的中文小字當成牌的美術，三種語言共用同一套牌卡圖。
占卜流程
最終的版本：拿掉了對話框、結論文字和祝福牌，讓畫面只剩牌卡和牌義說明：
- 點水晶球，春男跳上坐墊舉手，水晶球大亮
- 小屋模糊成背景，春男坐在桌旁聚氣，請你默念問題
- 直接發三張背面朝上的牌，點一下翻開
- 三張都翻開後牌疊成一疊，旁邊看牌義（牌面故事、這張牌在告訴你、在這個位置的解說）
- 存成 1080×1350 的圖卡分享
Tech Stack
首頁載入的 JS 約 200 KB gzip，大部分是 three.js；78 張牌卡各自拆成小檔，翻牌時才載入。
1. 前端（核心）
2. 渲染設定
3. 素材與工具
你可能也會喜歡
Want to work with Sui?
