電影級 3D 影片
Claude 無法直接生成影片像素，但它可以將 3D 場景寫成程式碼，然後逐幀渲染並編碼。本技能即為此流程。
場景 (HTML + Three.js) -- window.seek(t) --> scripts/render.mjs --> headless Chrome 螢幕截圖 --> ffmpeg --> MP4
render.mjs 使用虛擬時鐘步進，而非即時錄製。因此，結果在每台機器上都相同，且複雜場景不會出現卡頓；它只會渲染得更慢。這就是場景必須是時間的純函數的原因（請參閱「場景規則」）。
1. 首先檢查工具
node -v # 22 或更新版本 (render.mjs 使用內建的 WebSocket)
ffmpeg -version
必須安裝 Chrome、Edge 或 Chromium (會自動尋找；可設定 CHROME_PATH 以強制指定路徑)。Three.js 由場景從 CDN 載入，因此除非已自備 Three.js (請參閱 references/troubleshooting.md)，否則渲染機器需要網路連線。如果缺少某項工具，請明確告知使用者需要安裝的項目，並停止猜測其他解決方案。Blender 僅在寫實路徑時需要。
首次使用新機器時，請執行一次無依賴的煙霧測試。它能證明 Chrome、WebGL 和 ffmpeg 都正常運作，因此後續問題都出在場景本身，而非環境設定：
node <skill-dir>/scripts/render.mjs <skill-dir>/templates/smoke-test.html --out smoke.mp4 --duration 2 --width 640 --height 360
2. 工作流程
- 確認需求：用一兩句話總結：主題、氛圍、長度、長寬比、文字、音訊。當使用者未指定時，自行選擇預設值並說明你的選擇：1920x1080、30 fps、8-12 秒、深色背景、一個主角物件、一次相機移動、一個標題。直立影片 (TikTok/Reels/Shorts) 為 1080x1920。在開始之前詢問多個簡短問題通常不值得；第一次渲染就是最好的問題。
- 從模板開始。 將
templates/starter/複製到工作目錄 (cp -r)，然後編輯index.html。它已包含渲染器、色調映射、環境反射、泛光、陰影、種子粒子、相機路徑、HTML 標題疊加層和時間軸鉤子。替換主角物件、調色板、相機路徑和文字；保留基礎架構。 - 先看靜態幀，再渲染影片。 在最忙碌的時刻，以全尺寸渲染少數幾幀並開啟它們 (讀取 PNG 檔案)：
在此修正構圖、曝光、顏色和文字清晰度。一幀靜態圖僅需一兩秒；完整渲染則需數分鐘。node <skill-dir>/scripts/render.mjs my-video/index.html --stills 0,2,4,6,7.5 --out my-video/stills - 渲染一次。 選擇設定，然後渲染整個影片：
node <skill-dir>/scripts/render.mjs my-video/index.html --out my-video/video.mp4 --width 1920 --height 1080 --fps 30 --scale 2--scale 2以 2 倍解析度渲染再降取樣，可消除邊緣閃爍 (僅在最終渲染時值得使用)。長時間渲染應在背景執行並輪詢進度，避免使用者面對靜止的終端機。 - 驗證檔案，而非日誌。 使用
ffprobe檢查持續時間、大小和幀率；從 MP4 中提取兩三幀 (ffmpeg -ss 3 -i video.mp4 -frames:v 1 check.png) 並檢視。然後將 MP4 和場景資料夾交給使用者，以便他們可以調整。 - 修改 即變更場景並重新渲染。在針對某一時刻迭代時，可使用
--start/--end僅重新渲染特定範圍。
3. 場景規則 (及其原因)
- 所有動畫都是時間
t秒的純函數，在update(t)內部設定。不使用Math.random()(請使用帶種子的rng())，不使用Date.now()，不使用clock.getDelta()，也不在幀之間累積狀態。渲染器可能以任何順序、在任何時間點呼叫seek，且瀏覽器中的預覽必須與影片完全一致。 - 頁面合約 為
window.seek(t)(同步繪製)、window.__duration(秒) 和window.__ready = true(一旦資源載入完成)。lib/stage.js中的installTimeline()會完成這三項。詳情請參閱references/contract.md。 - 超過 1.0 的 HDR 顏色會產生光暈。 泛光只會捕捉亮度高於其閾值的像素，因此自發光部分使用
new THREE.Color(hex).multiplyScalar(3..6)；一般表面則保持在閾值以下。 - 文字使用 HTML/CSS 疊加在 Canvas 之上 (螢幕截圖包含整個頁面)。它在任何解析度下都清晰，無需字型檔案，並且可以在
update(t)內部透過純粹的樣式變更來製作動畫。 - 在設定
__ready之前，使用await載入資源 (GLTF 模型、紋理、字型)。在資源到達之前渲染的幀會成為影片中的永久瑕疵。 - 保持一個光源故事：一個主光、一到兩個彩色邊緣光，以及基於圖像的反射。在深色、略帶反射的地板上使用反射材質 (金屬、玻璃、清漆) 是呈現「3D 動畫」而非「網頁展示」的關鍵。
references/cinematography.md提供了相機移動、節奏、緩動、光源和色彩的配方。
4. 多場景、音訊、其他格式
- 多場景影片： 將每個場景渲染成各自獨立的 MP4，並使用相同的尺寸、幀率和編碼器設定，然後無需重新編碼即可合併：建立一個
list.txt檔案，其中包含file 'a.mp4'等行，然後執行ffmpeg -f concat -safe 0 -i list.txt -c copy out.mp4。將交叉淡入淡出效果放在場景本身的時間軸內 (一個場景的最後一秒和下一個場景的第一秒都淡入/淡出至黑色/顏色)，而不是混合已完成的檔案，因為後者會將所有內容編碼兩次。 - 音訊：
--audio track.mp3會將音訊混合進去，並修剪至影片長度。若要稍後僅變更音效：ffmpeg -i video.mp4 -i new.mp3 -map 0:v -map 1:a -c:v copy -shortest out.mp4。 - GIF / WebM / 較小的副本： 使用 ffmpeg 對已完成的 MP4 重新編碼；切勿為了變更格式而重新渲染。
- 變更一個場景 表示需要重新渲染該場景的檔案 (如果其中包含交叉淡入淡出，可能還需要重新渲染下一個場景)。
5. 何時改用 Blender
僅當需求超出即時引擎的模擬能力時，才使用 Blender (references/blender.md、templates/blender/render_blender.py)：路徑追蹤玻璃與焦散、體積光、次表面散射、流體/布料/煙霧模擬，或完全寫實的產品照片。Blender 每幀渲染速度慢得多，且需要安裝 Blender 4+；對於其他所有情況，Three.js 能以更短的時間獲得良好結果，並能快速迭代。
參考檔案
| 檔案 | 何時閱讀 |
|---|---|
references/contract.md | 從頭開始編寫場景、載入模型/紋理，或偵錯「從未設定 __ready」問題時 |
references/cinematography.md | 想要讓結果看起來更出色時：相機、光源、材質、緩動、節奏、色彩、文字、粒子 |
references/troubleshooting.md | 遇到黑畫面、渲染緩慢、CDN/離線設定、Windows/macOS/Linux 特殊狀況、奇異尺寸問題時 |
references/blender.md | 需要寫實或模擬效果時 |
scripts/render.mjs | 查詢所有選項：node scripts/render.mjs --help |