mcpField
T
threejs-camera-direction

threejs-camera-direction

github.com/scottsttsクリエイティブ・メディア946109 回インストール6 日前に更新
リポジトリ

threejs-camera-direction について

threejs-camera-direction は、Three.js シーンの構図、カメラ移動、モード切り替えを設計するスキルです。映画的またはインタラクティブな視点を構築する開発者向けで、カメラの所有権、入力制約、遷移テストを重視します。

主な機能

  1. 01フレーミング、スケール、レンズ、地平線の定義
  2. 02意味のある座標系でのターゲット構築
  3. 03位置と向きの個別導出
  4. 04オービットとルック入力の制限
  5. 05カメラ状態の復元と遷移テスト

活用シーン

  1. 01チェイス、サイド、オービットカメラの設計
  2. 02制限付きポインタールック操作の追加
  3. 03カメラ切り替えとリサイズ動作のテスト

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-camera-direction

インストール後、Claude Code で/threejs-camera-directionを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yamlreferences/camera-rig-and-cinematic-systems.md

詳細

カメラディレクション

カメラは受動的なビューポートではなく、作り込まれた視覚システムとして扱います。被写体を構図に収め、スケールを定め、安定した上方向のフレームを選び、モードの切り替えをすべて明示します。

構築順序

  1. デザインフレームを定義します。被写体のサイズ、画面占有率、レンズ、近クリップ/遠クリップ、動き、地平線/上方向の規則を設定します。
  2. 意味的なフレーム内にカメラターゲットを構築します。船体、天体の表面、ドッキング軸、またはシーンで定義されたショットを対象にします。
  3. 位置と向きを個別に導出し、その後に一度だけ組み合わせます。
  4. 宣言済みのヨー/ピッチおよび空間的な制約の範囲内でのみ、入力によるオービット/視点移動を追加します。
  5. 参照先で慣性が使われている場合は、フレームレートに依存しない追従、または制限付きスプリングを追加します。
  6. シーンがカメラを所有する場合は、カメラの投影設定と状態をスナップショットに保存して復元します。
  7. モード遷移、カット、ポインターロックの再取得、リサイズ、大きな座標をテストします。

正確なチェイス/サイド/オービットリグ、投影値、遷移ルール、浮動原点を使ったショット、ポインター操作、実装上の制限については、references/camera-rig-and-cinematic-systems.mdを参照してください。

絶対に守るルール

  • オフセットは被写体の寸法から導出します。スケールの異なるアセットに対して、固定距離を個別に調整しないでください。
  • 惑星の動きでは、グローバル Y ではなく、支配的な天体から上方向を導出します。
  • 位置の補間にはlerpを、向きの補間にはslerpを使用します。
  • 明示的な切り替えの間は、補間ステージを1つだけ使用します。同じ期間に遷移ブレンドと2つ目の追従スムーザーを重ねないでください。
  • ポインターロックを取得したら、カメラからヨー/ピッチを再同期します。
  • FOV、近クリップ、遠クリップ、またはアスペクト比が変わるたびに、投影行列を更新します。
  • 大きな平行移動によって誤った視差や精度低下が生じる場合、星や無限遠の背景はカメラ相対に保ちます。
  • シーンの破棄時に、カメラと入力の所有権を復元します。

適用範囲

オブジェクトの動きのタイムライン、スプリング、ドッキング、ステージング、デブリには$threejs-procedural-animationを使用します。このスキルでは、シーンをどのように表示するか、カメラモードをどのように切り替えるかを扱います。

コメント