threejs-r3f

React Three Fiber と Drei

プロジェクトにインストール済みのバージョンと既存のアーキテクチャを使用してください。以下の指示はユーザーのタスクを補足するものであり、無関係な変更や外部への操作を許可するものではありません。

React、react-dom、Fiber、Drei、Three.js のバージョンとピア依存関係を併せて確認してください。リアクターを React に合わせてください。すべての Fiber のメジャーバージョンがすべての React のメジャーバージョンに対応するとは限りません。ヘルパー API はインストール済みの Drei バージョンに基づいて確認してください。

意図的なカスタム統合が必要な場合を除き、レンダラーとループは Canvas に管理させてください。Canvas の子孫内で Fiber のフックを使用してください。ブラウザー専用の Canvas コードはフレームワークのクライアント境界内に置き、サーバーレンダリングされる製品コンテンツはその外に維持してください。

宣言的にシーンを管理し、継続的な変更には useFrame 内の参照を使用してください。フレームごとの動きに React の setState を使用するのは避け、状態は意味のある UI の遷移に限定してください。必要に応じてコストの高い命令型リソースをメモ化し、明示的な解放ルールを設けてください。フックのセレクターは不要な購読を減らしますが、ネストされた可変の Three.js 値をリアクティブにするものではありません。

非同期コンテンツには適切な Suspense 境界とエラー境界を設けてください。ローダーのキャッシュではジオメトリ、テクスチャ、マテリアルが共有される場合があります。共有エントリーをインスタンス所有のリソースとして変更または破棄しないでください。プリミティブと外部から提供されたリソースには、明示的なライフサイクル管理が必要です。シーンのインスタンスはクローンし、スキン付きモデルにはスケルトンを考慮したクローンを使用してください。

主に静的なシーンでのみ需要時レンダリングを使用し、すべての命令型変更と継続中の減衰処理で無効化が発生するようにしてください。重複するループやコントロールの更新を追加する前に、Drei ヘルパーの動作を確認してください。useFrame の優先度が正の場合、レンダリングの制御が引き継がれます。その後に誰がレンダリングするかを考慮してください。

Strict Mode でのマウント、ルート遷移、アセットの高速切り替え、読み込み失敗、重なり合うメッシュ間でのポインターイベントの伝播、需要時レンダリングのシーンがアイドル状態の場合をテストしてください。同等の HTML アクションも利用できるようにしてください。

API リファレンス

正確なシグネチャとリビジョン固有の動作については、公式ドキュメントを参照してください。ドキュメントにアクセスできない場合は、インストール済みの型定義またはソースを調べ、未解決の不確実性があれば明記してください。