SolijonSolayev/html-3d-video

HTML 3D Video Creator

ブラウザでプレビューでき、ビデオとしてキャプチャできる完全なHTMLアニメーションプロジェクトを作成します。不要な依存関係よりも、小さくて読みやすい実装を優先します。作成したファイルと、それらをプレビュー/エクスポートする方法を説明します。

ワークフロー

1. コンテキストから要件を明確にします。 主題、ビジュアルスタイル、時間、アスペクト比、色、テキスト、対象視聴者を特定します。必要な詳細のみを質問し、それ以外は適切なデフォルトを選択して明示します。デフォルトは1920×1080、30 fps、8～12秒、シームレスまたはきれいに解決されたエンディングとします。
2. ショットを計画します。 コーディング前に、シーン、カメラの動き、ライティング、アニメーションのビート、最終フレームを説明します。重要なオブジェクトとテキストはセーフエリア内に保ちます。
3. シーンを構築します。 ローカルプロジェクトの依存関係がない場合は、インポートマップまたは安定したCDNインポートを使用してThree.jsを使用します。レンダリング、シーン設定、アニメーション、キャプチャコントロールを明確に分離します。シーンを再現可能かつ一貫して記録できるように、決定論的な時間ベースのアニメーションを使用します。
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レシピを読んでください。
• ブラウザプレビューと録画UIの開始点としてassets/template.htmlを使用します。そのまま返すのではなく、要件に合わせて調整してください。