給孩子一本會動的故事書：我的 AI 互動 3D 繪本創作實驗
說明影片
一個關於繪本的小夢想
你有沒有想過，如果繪本裡的角色會動、會回應你的點擊，閱讀會變成什麼樣子？
上次跟大家分享了用 AI 做 2D 動畫的方法，最近我把這個玩心實驗推進到 3D 領域，用 Claude Code 的 Opus 5.5 模型，搭配 Three.js 技術，做出三本互動立體繪本：《西遊記》《三隻小豬》《小飛俠》。（一樣謝謝脆友的提示詞模板 @pound0423）
希望透過這個技術小實驗，嘗試「如何讓每個孩子都擁有專屬閱讀體驗」。
從 2D 到 3D 的跳躍
延續之前分享的互動程式創作方法，這次改用 Three.js——專門處理 3D 效果的技術，搭配 CSS 與 JavaScript，讓繪本不只是「會動」，而是真正「立體」起來。
設定的美術風格是：高質感 Q 版、紙藝摺紙、黏土 low-poly 風格。當你移動滑鼠，畫面會出現柔光粒子效果；點擊角色，他們會有 Q 彈的回應。翻頁設計也特別注意不要有奇怪的動作，讓整個閱讀體驗流暢自然。
最重要的是：就像請 AI 寫繪本故事一樣，你可以自己決定故事內容、每一幕的劇情、語言風格，只是現在，它變成立體的了。
三本繪本，三種互動可能
我選了三個大家耳熟能詳的故事作為實驗對象。每本書都有三個章節，每個故事結尾都有互動環節，三本全部讀完還有小驚喜。
《西遊記》 裡，每個角色都有合作互動：八戒要推東西、沙悟淨幫忙拿行李，悟空跟其他小猴子的樣子清楚可辨，不會混淆。
《三隻小豬》 有音效，還有一個很酷的橋段，蓋磚頭的小豬那一段，你需要一個一個磚塊點擊，參與蓋房子的過程。
《小飛俠》 則有撒仙子粉塵的互動，讓孩子真的「參與」故事的魔法時刻。
Claude Code 與 ChatGPT：一小時的差異
我同時用 Claude Code（Opus 5.5）和 ChatGPT Codex 做了比較實驗。
ChatGPT Sol （高）大概花了三十分鐘就完成了，基本上可以閱讀，但總覺得「少了什麼」。後來用 Claude Code （Opus 5.5）做，花了一個多小時，成果出來後我才明白差異在哪裡。
角色的豐富度、可識別性與探索互動，是關鍵。
在 Claude Code 的版本裡，每個角色看起來都非常清楚，悟空就是悟空，不會跟小猴子混淆。所有的細節、動態互動都更豐富、更有層次。
這讓我想到：技術不只是「做得出來」，而是「做得讓人有感」。
配音的取捨：便宜快速，但可以更好
為了讓不識字或閱讀能力還在發展的孩子也能享受這些故事，我加入了配音。如果為了免費快速，直接用了電腦內建的免費 TTS 語音，沒多久就全部配完了，超快。
當然，電腦本機 TTS 的語音聽起來仍有些機械感。如果希望配音更自然，可以試試以下兩種做法：
1. 使用 VoAI 絕好聲創：這是一個主打臺灣口音的 AI 影音服務平台。註冊並登入免費帳號後，選擇「短篇語音」功能，就能讓 AI 自動產生語音，再自行下載與編輯，全程不需人工配音。免費方案提供 1,000 字額度，可以先用來體驗。
2. 使用 Google AI Studio：直接透過 Chrome 開啟 Google AI Studio，即可使用 Gemini TTS 產生語音。
若目標是產出比較有感的聲線，這兩種方式都是值得嘗試的起點。
VoAI 使用小撇步
可以跟 Claude 這樣說（過程中可能會需要一些授權）：
主要說書人的旁白的可以用 VoAI TTS ，聲音「Lexy 樂晰」/Neo/可愛。
其他角色可以自己選配音。
直接到平台頁面，使用「短篇配音」（我沒有 API 方案）
Claude 就會幫你角色選擇合適的「音色」和「風格」喔。（豬小弟的聲音好可愛😆）
然後會幫你生成、下載，並放入影片中喔！自動方便啊。
美感與劇情：還可以更好
以美感來說，成品仍有進步空間；故事敘事也能更有可看性。這次每本書只有三個章節，未來可以增加篇幅，並融入「英雄旅程」等故事模板，讓角色經歷目標、掙扎、挫折與轉折，使情節更有張力，角色成長也更完整。
這正是互動創作迷人的地方：它永遠有「下一步」可以玩，也總有新的故事可能等待我們展開。
為誰而做？為什麼而做？
我做這個實驗，是希望家長或特教老師能為孩子創作個人化的互動繪本。
每個孩子的學習節奏、興趣、需要的支持都不一樣。如果我們能用 AI 快速產出專屬的互動教材，不只能增強孩子的閱讀理解，還能傳遞重要的人生價值與文化。
這不是要取代市面上精美的繪本，而是在「客製化、包容性的學習支持」這條路上，多一種可能。
你可以試試看的三個方向
如果你也想試試看，可以從這些角度開始：
1. 選一個孩子喜歡的故事主題，用 AI 請它寫一個簡短的三章節故事腳本
2. 用 Claude Code 搭配 Three.js 提示詞，讓它生成互動立體版本（提示詞我就貼在最後面或此文件）
3. 加入互動元素與配音，讓故事真正「動起來」
重點不是做到完美，而是開始玩、開始試。
溫柔地嘗試
這些立體繪本還不夠完美，但每一次實驗，都讓我更相信：當科技的門檻降低，教育工作者與家長就有更多空間發揮創意與溫柔。
我們可以為特殊需求的孩子做一本專屬的社交故事繪本，可以為新住民家庭的孩子做雙語互動書，可以為任何一個孩子，做一本真正屬於他的故事。
技術會進步，AI 會更強大，但那份「想為孩子做一本特別的書」的心意，才是一切的起點。
那麼，你想為誰做一本什麼樣的繪本故事呢？
提示詞
你是一位資深的 WebGL / Three.js 互動前端工程師與創意技術指導。
請為我開發一個高品質、可在本地瀏覽器直接執行的單一檔案「3D 互動立體繪本網站」（Single-File HTML，包含 CSS 與 JavaScript）。
〖核心架構與技術要求〗
依賴庫（全以 CDN 引入）：
Three.js (最新穩定版 r128+)
GSAP (TweenMax/gsap 3.x) 用於流暢平滑的鏡頭運鏡與物體動畫
OrbitControls（僅在特定允許自由視角時使用，主要由 GSAP 控制鏡頭節奏）
零外部資產原則（Zero External Asset Dependency）：
不得引用任何外部 .gltf、.obj 或圖片紋理，避免本地 CORS 與 404 報錯。
所有角色與物件皆採用 Three.js 原生幾何體（Box, Cylinder, Sphere, Cone 等）以「高質感 Q 版紙藝摺紙 / 黏土 Low-Poly」風格組裝，色彩柔和、圓潤可愛。
音效不使用外部 mp3，全數採用「Web Audio API」純代碼合成：包含柔和五聲音階環境旋律、紙張翻動聲（白噪聲過濾）、物體彈出聲（柔和泡泡音）及點擊回饋音。
首次使用者點擊畫面後啟動音訊上下文（AudioContext），右上角常駐「音樂開關（靜音/播放）」圖示。
互動防呆與狀態機（State Machine）：
嚴格建立狀態機制（BOOKSHELF -> BOOK_ZOOM -> OPEN_COVER -> SCENE_INTERACTION -> PAGE_TURN -> QUIZ -> ENDING）。
在任何轉場或動畫播放期間，完全鎖定點擊事件，防止連點導致動畫錯位或場景順序錯亂。
視覺與互動體驗：
滑鼠游標移動時帶有微弱的柔光粒子拖曳軌跡（Canvas 2D 或 Three.js 粒子）。
點擊角色時，角色會有 Q 彈跳動（Squash & Stretch）或頭部轉動回饋。
翻頁時：當前場景的 3D 模型平滑縮小並壓平成紙片（scale y/z 歸零）消失 -> 書頁翻動 -> 新場景元素伴隨彈性動畫自頁面躍然而出。
鏡頭（Camera）配合劇情自動平滑拉近特寫或廣角全景，禁止突兀切換視角。
〖語言與文本風格〗
全站文本、旁白與對話採用「台灣繁體中文」，風格溫暖、簡短易讀、親切且富有啟發性。
UI 文字與對話框置於頂部或底部卡片中，排版優雅，絕不遮擋 3D 角色的臉部。
〖世界觀與三本繪本內容規劃〗
一開始鏡頭面對溫馨木質書架，擺放三本風格不同的立體故事書。玩家點擊其中一本後，書籍平滑飛至中央書桌，封面微微發光，接著自動攤平翻開，紙雕場景從書頁中立體升起。
● 第一本：《西遊記》（金橘、翠綠與雲霧藍主調）
第 1 幕（悟空登場）：
花果山瀑布流動、桃樹隨風搖曳，一顆巨大的仙石立在山頂。點擊仙石後，石頭震動並迸出金光，孫悟空從中跳出，翻一個筋斗落到畫面中央，小猴子們開心圍過來歡呼。
第 2 幕（踏上取經旅程）：
場景翻頁變成蜿蜒山路，唐三藏騎著白龍馬前進，孫悟空、豬八戒與沙悟淨跟在身旁。點擊孫悟空手中的金箍棒，他會把金箍棒變大，指向前方高山，提醒大家繼續向西前進。
第 3 幕（齊心克服困難）：
前方突然出現妖怪與巨石阻擋道路。玩家依序點擊四位角色，悟空搬開巨石、八戒幫忙推車、沙悟淨保護行李、唐三藏鼓勵大家。最後道路重新打開，一行人迎著夕陽繼續前進。
結尾互動問答：
「唐三藏一行人能一路向西前進，最重要的是什麼？」
選項：
A. 每個人都只做自己的事
B. 發揮不同能力、互相合作
答對後，畫面出現筋斗雲與金光特效，獲得「齊心取經」金箍棒徽章。
● 第二本：《三隻小豬》（暖黃、磚紅與草地綠主調）
第 1 幕（三座不同的房子）：
青青草原上，三隻小豬各自準備蓋房子。第一隻搬來稻草，第二隻搬來木頭，第三隻一塊一塊堆起磚頭。
玩家可以分別點擊三種材料，觀察房子快速搭建：
點擊稻草，草屋「唰唰唰」迅速完成；
點擊木頭，木屋「叩叩叩」組裝完成；
點擊磚塊，磚房則需要一次又一次點擊，慢慢蓋高。
第 2 幕（大野狼來了）：
森林後方傳來腳步聲，大野狼走到草屋前。
點擊大野狼，他會深吸一口氣：「呼——！」
草屋被吹得滿天飛。
接著大野狼來到木屋，再次吹氣，木屋開始搖晃，最後也倒下來。兩隻小豬趕緊跑向第三隻小豬的磚房。
第 3 幕（堅固的磚房）：
三隻小豬一起躲進磚房，大野狼再次使勁吹氣。
玩家可以快速點擊磚牆，幫忙「加固房子」。無論大野狼怎麼吹，磚房依然穩穩站著。
最後大野狼累得坐在地上喘氣，三隻小豬從窗戶探出頭，相視而笑。
結尾互動問答：
「第三隻小豬的房子為什麼能保護大家？」
選項：
A. 願意花時間，把房子蓋得扎實
B. 因為他的房子顏色最好看
答對後，三隻小豬一起把最後一塊磚放上房子，獲得「踏實建造」紅磚徽章。
● 第三本：《小飛俠》（星空藍、月光銀與夢幻翠綠主調）
第 1 幕（飛進窗戶的小飛俠）：
夜晚的房間裡，溫蒂與弟弟們正準備睡覺。窗外突然飄進一點一點閃亮的金色仙塵。
點擊窗戶後，窗戶緩緩打開，小飛俠彼得潘與小仙子叮叮從夜空飛進房間。
點擊叮叮，她會灑下一圈閃亮仙塵，房間裡的物品微微飄起。
第 2 幕（飛向夢幻島）：
孩子們跟著彼得潘飛出窗戶，穿越倫敦夜空。
玩家滑動畫面，可以控制大家上下飛翔，飛過鐘樓、屋頂與雲層，最後朝著遠方發亮的星星前進。
雲朵散開後，神秘的夢幻島出現在月光之下。
第 3 幕（勇敢面對虎克船長）：
夢幻島海岸出現虎克船長的海盜船。彼得潘與朋友們必須一起想辦法救出被海盜抓住的夥伴。
玩家點擊不同角色：
彼得潘飛到船桅吸引注意；
叮叮灑下仙塵；
溫蒂偷偷解開繩索；
孩子們一起逃離海盜船。
最後大家成功飛向夜空，虎克船長站在甲板上氣得跺腳，遠方還傳來鱷魚「滴答、滴答」的聲音。
結尾互動問答：
「當彼得潘和朋友遇到困難時，他們怎麼成功脫困？」
選項：
A. 勇敢行動，也彼此幫助
B. 每個人自己逃走
答對後，滿天星星亮起，一顆最大的星星飛到玩家面前，獲得「勇敢冒險」星星徽章。
〖完成三本故事後〗
三本書重新飛回木質書架。
「齊心取經」、「踏實建造」、「勇敢冒險」三枚徽章依序亮起，最後在書架中央拼成一枚大型金色徽章。
畫面出現：
「每一個故事，都藏著一種讓自己變得更強大的力量。」
下方出現三個發光圖示：
西遊記｜合作
三隻小豬｜踏實
小飛俠｜勇氣
點擊任一徽章，可以再次打開對應故事，重新探索其中的互動場景。
〖交付要求〗
請提供一份完整無缺、直接可存為 .html 檔案運行的程式碼。包含：
完整的 HTML/CSS 介面（包含質感書架、立體書切換按鈕、對話框、靜音切換按鈕、測驗彈窗）。
Three.js 場景建構（書架、桌子、封面、精緻 Low-Poly 角色幾何體）。
GSAP 動畫管線與 Web Audio API 程式碼。
請勿使用「// 這裡省略...請自行補充」等佔位符號，務必輸出可完整運行的成品。
致謝
提示詞改編自脆友 ＠pound0423
留言