threejs-camera-controls-and-rigs について
Three.js 開発者向けに、カメラリグの設計を扱うスキルガイドです。状態の所有者、検証付きの引き継ぎ、精度管理、ライフサイクル復元を明確にします。
主な機能
- 01カメラ状態の所有者と座標空間の定義
- 02フレーミングと投影方式の選択
- 03姿勢と深度の実現可能性検証
- 04コントロールの引き継ぎと履歴管理
- 05原点移動、リサイズ、状態復元への対応
- 06リグの検証基準
活用シーン
- 01アセット検査や建築ビューの設計
- 02姿勢が跳ねないカメラ遷移の構築
- 03原点移動中の時間的効果の維持
- 04カメラのライフサイクルとリサイズのテスト
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ linegel/ threejs-complete-set-of-skill --skill threejs-camera-controls-and-rigsインストール後、Claude Code で/threejs-camera-controls-and-rigsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSEagents/openai.yamlreferences/camera-rig-and-cinematic-systems.md詳細
カメラの制御とリグ
リグはビューおよびフレームごとに、1 つのセマンティックポーズ、ジッターのない 1 つの投影、1 つの原点エポックを公開します。制御、フィットソルバー、作成済みショット、時間的ジッター、座標の再基準化はそれぞれ独立した状態を持ち、明示的に受け渡します。
1. 所有者と座標空間を宣言する
各チャンネルに書き込み元を 1 つ割り当てます。
| チャンネル | 書き込み元 |
|---|---|
| セマンティックポーズ | アクティブな制御、フィットソルバー、作成済みショット、または外部/XR 所有者 |
| ジッターのない投影 | アクティブなフレーミングまたはショットの所有者 |
| 一時的なジッター | レンダリング中の時間ノード 1 つ |
| レンダリング原点 | 原点エポックにおける大座標の所有者 |
| カメラデータの後処理 | 1 つのシーンパスと、そこで宣言されたコンシューマー |
| リスナー/リソース/復元 | シーンまたはビューのライフサイクル所有者 |
単位、座標系の利き手、ワールド上方向、カメラの親契約、およびオブジェクト空間、ワールド/グローバル空間、局所接平面空間、カメラ相対空間、ビュー空間、クリップ空間、スクリーン空間間の変換を宣言します。カメラのローカル前方は -Z、右方向は +X、上方向は +Y です。非アクティブな入力システムは意図を出力し、カメラに書き込むのはアクティブなセマンティック所有者だけです。
完了条件: すべての変更可能なカメラフィールド、行列、時間リソース、リスナーに書き込み元が 1 つだけあり、座標空間をまたぐすべての変換で変換方法が明示されています。
2. フレーミング分岐を選ぶ
画像または計測の要件に基づいて選びます。
| 要件 | アーキテクチャ |
|---|---|
| アセットの検査 | 境界に合わせた透視投影または正投影ビューと、オービット制御 |
| 建築 | 視点/断面アンカー、レンズシフト、制約付きオービット/パン/ウォーク |
| 科学的なビュー | 再現可能なポーズ、軸/単位、計測の意味に応じて選択する投影 |
| 地理空間スケール | 局所接平面座標系と、原点を再設定したカメラ相対座標または高/低座標 |
| 映像撮影 | 明示的なカットとブレンドのエポックを持つ、作成済みのポーズ/投影トラック |
対象の支持点、安全フレーム、必要な奥行き範囲、作成済みのレンズ/投影の意図を定義します。画面上のスケールを奥行きに依存させない場合は正投影を使い、短縮遠近法に意味がある場合は透視投影を使います。
フレーミングと投影を参照し、非対称フラスタム、ボリュームフィッティング、正投影のルール、奥行き精度を確認してください。
完了条件: 選択した投影が視覚または計測の要件を満たしており、支持点集合、安全フレーム、奥行き範囲が明示されています。
3. 有効なポーズと投影を解く
位置、ターゲット、上方向のヒント、および最小整列軸へのフォールバックから、決定論的な正規直交基底を構築します。奥行きのある対象では、平面上の幅/高さだけに合わせるのではなく、保守的な支持点集合を投影します。有限でないクリップ座標と、透視投影における w <= 0 を拒否します。負のビュー空間 z、安全フレーム内の NDC、すべての支持点がニア/ファー範囲内にあることを必須とします。
階層データやフラスタムデータを読み取る前に、ワールド行列と投影行列を更新します。単位スケールの親階層を使うか、更新済みで剛体かつ向きを保持する親を介して変換します。位置/クォータニオンだけを使うカメラパスでは、せん断、反射、特異、または不均一スケールを含む親階層を拒否します。
遮蔽物によってカメラが変化する場合は、パスに対するニアプレーンのフットプリントを解き、安全フレームと奥行きの実現可能性を再確認します。構図とクリアランスの両方に合格する必要があります。
完了条件: 反映されたカメラが有限な右手系基底と、有効な w を持つ有限なクリップ座標を備え、支持点集合全体が安全フレームと奥行き範囲内にあり、遮蔽物が有効な場合は遮蔽物適用後に再確認されています。
4. 明示的なハンドオフを1つ実行する
更新の前に、現在の所有者を解決します。有限時間のハンドオフでは、開始時刻を一度だけ取得し、秒単位で時間を評価して、位置に lerp を1回、最短経路のクォータニオンに slerp を1回適用し、完了時には正確な目標値をコピーします。継続時間がゼロのハンドオフは履歴をリセットする明示的なカットです。補間の前に、負の継続時間や有限値でない継続時間を拒否します。作成した移動ショットでは、パスの連続性、エイム/アップフィールド、タイミング、セーフフレーム、遮蔽物のチェックをそれぞれ別に管理します。
コントロールに戻す際は、まず渡されたポーズがコントロールのサポートするアップ/ロール、親空間、制限の範囲内にあることを確認します。OrbitControls の場合は、描画を行わないトランザクションでターゲットと設定を再構築し、潜在状態をクリアするために再作成してから、コンストラクターの更新後に渡されたポーズを再適用します。camera.up を変更した後も再作成します。意図したリセット時の基準状態を維持します。最初の update(0) で位置、ターゲット、向き、投影が保持されるまで、入力と自動回転を停止します。サポートされていないロールや、制限によるクランプがある場合、ジャンプがないと主張するのではなく、明示的なトランジションまたは別のコントローラーが必要です。ポインタールックコントローラーでは、宣言されたアップフレームでヨー/ピッチを再構築し、ロック解除、フォーカス喪失、所有者変更、破棄の際に押下中の入力をクリアします。
標準コントロール、ブレンド、または作成したショットを使用する場合は、コントロールとハンドオフを参照してください。
完了条件: 再生レートが異なっても同じ終点に到達し、最初のコントロール更新でジャンプが発生せず、各フレームでセマンティックな所有者が厳密に1つだけ書き込みます。
5. 精度と時間履歴を管理する
シミュレート対象またはライブ対象については、生の固定ステップの終点ではなく、レンダー時のサンプル時刻における不変の前/現在のプレゼンテーションサンプルを使用します。カメラ追従、カリング、シャドウ、ピッキング、速度は、同じサンプルIDを共有します。ストリームまたはIDの不連続が発生した場合は、それらをリセットします。
グローバル位置は、CPUの倍精度または明示的な高低表現で保持します。オブジェクトの種類とワークロードに応じて、通常メッシュの高精度、チャンク単位のローカル座標への再基準化、または高低インスタンスデータを選択します。宣言された精度しきい値に達した場合にのみ再基準化し、グローバル座標からレンダー座標への不変な前/現在の変換をまとめて公開します。
時間状態は、安定したカメラ/シーンID、投影エポック、原点エポック、レンダー範囲/DPR、MRTレイアウト、速度規約をキーとして管理します。カット、テレポート、安定IDの変更、互換性のない投影、補償されていない再基準化、範囲またはDPRの変更、速度レイアウトの変更が発生した場合は、描画前に該当する履歴エポックをインクリメントします。変更されたマッピングを使用する速度、時間方向アンチエイリアス、DOF、シャドウフィッティング、およびすべての再投影キャッシュにリセットを適用します。
標準の r185 TRAANode は、一時的な setViewOffset() ジッターを管理し、描画バッファーサイズの入力を想定しています。作成済みのビューオフセットは保持せず、公開された履歴リセット機能もありません。互換性のないエポックでは再作成します。作成済みまたはタイル分割されたオフセット、XR、解像度スケーリング、または再基準化をまたぐ履歴の保持が必要な場合は、別途管理するノードまたはパッチを適用したノードを使用します。
r185のジッターの挙動については時間履歴、ULPゲート、表現の選択肢、再基準化の順序についてはカメラ相対精度を参照してください。
完了条件: 現在と前の変換が安定IDと宣言されたエポックを共有し、ライブ対象を使用するすべてのコンシューマーがレンダー時のサンプルIDを共有し、すべての不連続にリセットまたは証明済みの補償があり、静止オブジェクトが再基準化をまたいで誤った動きを示さないこと。
6. 所有する状態を確定し、リサイズして復元する
セマンティックな姿勢とジッターなしの投影を一度書き込み、その後でワールド行列と投影行列を更新します。テンポラルの所有者が、レンダリングスコープ内でのみジッターを適用するようにします。リサイズまたは DPR の変更時には、カメラの投影、描画バッファーサイズのポスト処理リソース、ジッターのスケール、履歴エポックを一つのトランザクションとして更新します。
リグが所有するすべてのフィールドのスナップショットを取得します。対象は、トランスフォーム、up、親、レイヤー、行列フラグ、投影/ビューオフセットの全状態、コントロールの状態、出力グラフ、テンポラルノード、原点バッファー、リスナー、借用した DOM スタイル、所有する入力キャプチャです。Control キーを押した状態、ドラッグの途中、所有するポインターロックの解除をテストします。標準のコントロールの破棄処理には、リファレンスに記載されたリビジョン固有の不備があります。
破棄時には、そのスナップショットを復元し、所有するコントロール/ポスト処理/ストレージ/デバッグリソースを破棄し、出力ノードまたは出力変換の変更後にレンダリングパイプラインをダーティー状態にします。
借用したカメラ、コントロールのインスタンス、またはレンダリングパイプラインを変更する前に、ライフサイクルと復元を読んでください。
完了条件: リサイズ後も投影とテンポラルリソースの整合性が保たれ、マウント/破棄を繰り返しても、リスナー、GPU リソース、デバッグオブジェクトを残さず、借用したすべてのフィールドが復元されます。
7. リグを検証する
該当するワークロードについて、極端なアスペクト比、コントロールの全範囲、カットと中断されたブレンド、投影の変更、繰り返しのリベース、リサイズ/DPR の変更、破棄/再作成のサイクルでテストします。最終フレームと診断フレームを確認します。
姿勢/投影/原点/履歴の各所有者とエポック、ターゲットのビュー/クリップ/NDC、サポートセットの範囲とセーフフレームの比較、near/far、現在/前回の原点、相対座標の最大値、コントロールの引き継ぎ状態、アクティブな MRT およびテンポラルリソースを記録します。
完了条件: 選択したすべての分岐が、幾何、引き継ぎ、精度、リセット、リサイズ、ライフサイクルの各基準に合格し、各失敗の原因を一つの所有者、空間変換、実現可能性テスト、または履歴エポックに特定できます。
振り分け
シーンオブジェクトのモーションには $threejs-procedural-motion-systems、シャドウのフィッティングには $threejs-scalable-real-time-shadows、ポスト処理/出力の所有権には $threejs-image-pipeline、固定ビューと再生の証跡には $threejs-visual-validation を使用します。