蹦蹦書房 Pop-up Library

打開書房，先選人文館或科學館，再挑一個系列、一本書。書一翻開，場景會像立體書一樣站起來，可以轉角度、點角色，角色會用台灣口音講台詞。讀完一本拿一枚徽章，同系列讀滿三本，還會解鎖一本隱藏書。

專案背景

起點是 Threads 上一位創作者（@pound0423）分享的三國 3D 立體繪本提示詞，我照著做出第一本，小孩很喜歡。可是一個故事一個網頁，很快就亂了，所以我把它做成一間「圖書館」：有書架、有分館、有收藏。

劇本、規格、台詞後來都是我們自己重新寫的，但起點是他的分享，在這裡致謝。

核心設計

1. 一本書就是一個檔案。 書房本體負責翻書、鏡頭、音效、配音、問答、徽章；每本書只要寫自己的場景和台詞，加新書不用動到其他書。
2. 台灣口音配音。 旁白和每個角色都有自己的聲音、語速和音高，多人齊聲的台詞是同一句錄好幾個音高再疊起來。
3. 讀完要回到實體書。 科學館每本書結尾都有一個「書房任務」，帶小孩去翻家裡的實體書。
4. 一本書壞掉不會拖垮整間書房。 書的程式出錯時，畫面會顯示錯誤，照樣能翻到下一頁。

技術架構

• 引擎：Three.js 畫 3D 場景，一頁一幕，每幕可以有多個互動
• 配音：微軟 edge-tts 的台灣口音聲音，錄好嵌進網頁，可以離線讀
• 加新書：把書檔丟進去，一個指令自動檢查語法、錄音、用 Playwright 試玩每一頁，試玩沒過就不會上架
• 手機做書：在 Telegram 丟一個書檔給 AI 分身，它會跑完整套流程，截圖給我看，我說「上架」才更新
• 上線：Cloudflare Pages，家用站有密碼

工程挑戰

• AI 寫的書檔常常用到不存在的功能。 第一次請別的 AI 照說明寫書，用了 3D 函式庫舊版沒有的形狀，直接當掉。後來把說明文件補完整，第二次盲測就四幕全過。
• 館越來越多，書架要重新設計。 書從 4 本長到七十多本，首頁從一排書架，改成大廳選館、系列、選書三層。

同一套家用教材

蹦蹦書房之外，我也幫小孩做了一台「拼字機」：拆字母、聽發音、把字拼回來，照自然發音的順序一關一關開。

功能亮點

• 七十多本 3D 立體書，涵蓋三國、西遊記、經典童話、人體、宇宙、自然現象
• 全書台灣口音配音，點上方的卡片會念旁白
• 徽章收藏和隱藏書，讀完有獎勵
• 丟一個書檔就能自動試玩、錄音、上架