Red Cliffs 3D — Development skill for Claude Code

赤壁之戰 208 — 全 3D 戰場重現

以電視特別節目的 3D 運鏡與特效，重現西元 208 年的赤壁之戰。 單一 HTML 檔、零 build、零後端。

**Live Demo**: https://yazelin.github.io/red-cliffs-3d/ （[無聲原版](https://yazelin.github.io/red-cliffs-3d/classic.html) — 第一輪 AI 一次對話的原始產出,凍結保存）


📦 引擎已抽成通用「AI 戰場編輯器」

本專案的 3D 引擎已抽出成獨立的通用編輯器:**[battlefield-editor](https://github.com/yazelin/battlefield-editor)** ([線上](https://yazelin.github.io/battlefield-editor/))。在那裡,**每一場戰役都是一份資料 package**, AI 負責編寫、人負責驗收微調;赤壁只是它載入的其中一份。

**本 repo 是原版赤壁 showcase,保留原網址展示,但已凍結、不再更新。** 引擎改進、新戰場 (含完整 8 幕的**官渡之戰** + 旁白語音 / 字幕 / 音效 / 背景音樂)、以及 AI 編寫流程, 全部都在 battlefield-editor 進行。要做自己的戰場、或看最新功能,請去那邊。

這是什麼

一個互動式的赤壁之戰 3D 戰場：九幕時間軸從「大軍南下」演到「天下三分」， 可以像歷史節目一樣自動播映（電影運鏡 + letterbox），也可以像遊戲一樣 隨時拖曳滑鼠接管鏡頭、自由探索戰場。

• 地形：程序化生成的長江戰場——赤壁紅崖、烏林、夏口、漢水支流、華容道沼澤、江陵與襄陽城
• 三方兵力：曹操藍、孫權紅、劉備綠；軍旗以「曹／孫／劉」大字呈現，遠看即可識別
• 時間軸九幕：大軍南下 → 孫劉同盟 → 初戰赤壁 → 鐵索連環 → 苦肉計 → 東風驟起 → 火燒赤壁 → 敗走華容 → 天下三分
• 每一幕呈現：陣型與移動方向（動態箭頭）、將領姓名、重大事件標注、三方戰力消長、艦隊狀態（正常／連環／著火／殘骸）
• 計策發動特效：連環計、苦肉計、借東風、火攻——以全螢幕書法計策卡呈現，並區分「史」（正史）與「演義」（三國演義）
• 天氣與戰場特效：東南風粒子流、GPU 火焰與濃煙、火光映江、箭雨與火矢（漢代無火炮，遠程武器以弓弩火矢呈現）、鏡頭震動
• 電影級音訊：九幕各自的 CC0 配樂、zh-TW 旁白解說與同步字幕、行軍鼓／馬蹄／箭雨／刀劍／鐵索／爆燃／計策鐘磬等音效、風／江水／火場環境音
• 互動：點擊任一部隊查看兵力與背景；時間軸可任意跳幕；速度 0.5× / 1× / 2×；旁白／字幕可開關

操作

操作	效果
拖曳	旋轉視角（會自動切出電影運鏡）
滾輪	縮放
右鍵拖曳	平移
點擊部隊	查看部隊詳情
時間軸節點	跳到任一幕
「回到電影運鏡」	交還鏡頭給導播

建議使用桌面瀏覽器觀看。

技術

• Three.js r160（CDN importmap，無 build step）
• 全部內容在單一 index.html（地形、單位、粒子、運鏡、UI、時間軸引擎）
• 地形：參數化類比地形——由 data/terrain.json 資料驅動（河道折線／隆起 bump／山帶／沼澤區／色階），經生成器產出連續高度場與頂點色彩；外觀與原版一致，但已可當資料編輯
• 火焰／濃煙：GPU 粒子（vertex shader 內以 seed + time 計算生命週期，CPU 零更新）
• 軍旗：Canvas 繪製書法字纹理 + 頂點波動
• 標籤：CSS2DRenderer（地名、部隊、事件卡）
• 字體：Noto Serif TC / Noto Sans TC
• 結構與陣營資料化：城池／關口／營寨／地名與三方陣營設定不再寫死在 index.html，改由 data/ 下的 JSON 於啟動時載入，經 type → builder 登錄表（registry）建場

音訊

三條匯流排(Web Audio):配樂 / 音效 / 旁白,旁白播放時其餘兩路自動 ducking。

• 配樂:九幕各一首 CC0 曲目,選曲流程是「Freesound API 撈候選