HTML 3D 影片製作工具

HTML 3D 影片製作工具 是做什麼的？

建立一個完整的 HTML 動畫專案，可在瀏覽器中預覽並捕捉為影片。優先選擇小型、可讀性高的實作方式，避免不必要的依賴。說明您建立了哪些檔案，以及如何預覽/匯出它們。

工作流程

1. 從上下文釐清需求。 識別主題、視覺風格、持續時間、長寬比、顏色、文字和目標觀眾。僅詢問必要的細節；否則選擇合理的預設值並說明它們。預設值為 1920×1080、30 fps、8–12 秒，以及無縫或乾淨結尾。
2. 規劃鏡頭。 在編碼前描述場景、攝影機移動、燈光、動畫節拍和最終畫面。將重要物體和文字保持在安全區域內。
3. 建立場景。 使用 Three.js，並在無本地專案依賴時使用 import map 或穩定的 CDN 匯入。確保渲染、場景設定、動畫和捕捉控制項清楚分離。使用確定性時間基準動畫，以便場景可以一致地重現和錄製。
4. 使其可用。 包含可見的預覽、播放/暫停或重播控制項，以及在要求影片匯出時的清晰匯出/錄製控制項。在頁面中顯示狀態和錯誤，不要靜默失敗。
5. 驗證。 檢查瀏覽器主控台錯誤，驗證場景以要求的長寬比渲染，從頭到尾測試動畫，並確認匯出路徑在支援的瀏覽器中有效。當轉碼器或捕捉 API 不可用時提供備援方案。
6. 交付。 總結結果，列出檔案，提供精確的本地預覽說明，解釋匯出格式/瀏覽器限制，並提及任何外部資源或網路需求。

實作要求

• 交付完整的可執行 HTML 檔案或專案，而非虛擬碼。避免省略的章節，例如「在此加入動畫」。
• 當能滿足需求時，優先使用程序化幾何、材質、光源和產生的文字。如果使用外部資源，使用使用者提供的資源，或清楚標明來源和授權考量。
• 使用 requestAnimationFrame 進行預覽。保持動畫基於經過時間而非影格數，以確保在不同更新率下保持流暢。
• 處理視窗大小變更和裝置像素比率；避免過高的像素比率導致渲染緩慢。
• 在錄製時將渲染器的繪圖緩衝區設定為預期的匯出尺寸。在支援的情況下使用 canvas.captureStream(fps) 和 MediaRecorder 從畫布捕捉。使用 MediaRecorder.isTypeSupported() 選擇支援的 MIME 類型，而非假設轉碼器。完成時停止所有軌道並釋放資源。
• 說明瀏覽器影片錄製是即時的，且可能因機器和瀏覽器而異。對於影格精確或專業編碼，提供使用編號影像序列或其他明確產生的輸入的選用 FFmpeg 工作流程；絕不暗示瀏覽器保證特定的轉碼器。
• 將匯入的檔案和資源視為不受信任的。在未說明其作用前，不要執行使用者提供的腳本或下載任意資源。
• 保持控制項的可及性：標籤、可使用鍵盤操作的按鈕、可見的焦點和狀態文字。在適當時尊重減少動畫偏好設定。

建議的專案結構

對於單一場景需求，自包含的 index.html 通常已足夠。對於較大的交付物，請使用：

project/
├── index.html
├── src/
│   ├── main.js
│   └── scene.js
├── assets/
└── README.md

參考資料

• 閱讀 動畫工藝指南 以了解構圖、時間安排和動畫潤飾。
• 閱讀 Three.js 小型 API 筆記 以了解常見的場景和渲染器模式。
• 閱讀 FFmpeg 食譜 以了解當使用者需要後製或影像序列工作流程時的使用方法。
• 使用 assets/template.html 作為瀏覽器預覽和錄製 UI 的起點；根據需求調整它，而非原樣返回。