Chrome DevTools内でReact Three Fiberシーンを検査および編集する
React Three DOMは、Poimandresによって構築されたChrome拡張機能で、React Three FiberコンポーネントツリーをThree.jsシーングラフにリンクし、ブラウザ内での検査とデバッグを可能にします。これはDevToolsに統合されており、開発者はシーン階層をたどり、メッシュの背後にあるReactコンポーネントを見つけ、Three.jsのプロパティを即座にキャンバス更新とともに編集できます。この拡張機能は、R3Fタブ、視覚的ハイライト、および迅速な反復のためのリアルタイムプロップ編集を追加します。ウェブ開発者や3D技術アーティストを対象としており、位置、マテリアル、または照明を調整する際のフィードバックループを短縮します。
このツールは、どのReactコンポーネントがどのメッシュをレンダリングするかを明確にします。
DevTools R3Fタブ内では、シーングラフが3DオブジェクトをそのReact対応物と並べて表示し、コンポーネントインスタンスとそのライブプロップを検査できます。 コンポーネントマッピングは、どのコンポーネントがメッシュを作成したかを特定し、選択がキャンバス内での視覚的ハイライトを引き起こします。パネルにはプロパティ名と現在の値がリストされているため、開発者はレイアウト、アニメーション、またはマテリアルの問題に責任を持つ正確なノードをターゲットにできます。
ライブプロップの編集は、ページ全体のリロードなしで反復的な調整を迅速化します。
この拡張機能は、コンポーネントプロップとThree.js属性への直接編集をサポートし、即時の視覚的フィードバックを提供します。これにより、アプリが実行されている間に位置、回転、マテリアルパラメータをホットチューニングできます。このツールは、多くのR3Fライブラリの背後にいる開発者集団によって維持されているため、そのオブジェクトモデルは宣言的なReactパターンに従い、ソースとインスペクタ間でプロパティ名を保持します。これにより、視覚的アーティファクトの起源を追跡する際の推測作業が減ります。
このツールはReact Three Fiber専用に構築されており、範囲が狭いです。
検出には互換性のあるReact Three Fiberの実装と完全に読み込まれたページが必要なため、インスペクタはバニラThree.jsシーンには表示されない場合があります。この拡張機能はChromium DevToolsに統合されており、Chromiumベースのブラウザ全体に対応していますが、その専門性により、プレーンなThree.jsとR3Fコードを混在させるチームは、普遍的なシーンインスペクタとして使用することはできません。これは、すでにReactベースのアプローチを使用しているプロジェクト向けに意図されています。
R3Fチームのための集中したユーティリティ、明確な範囲とトレードオフを持つ。
React Three DOMは、コンポーネントコードとレンダリングされたシーンの間でより密接なフィードバックが必要なReact Three Fiberにコミットしたチームにとって実用的な選択です。この拡張機能は特にR3Fを対象としているため、プレーンなThree.jsを使用しているプロジェクトは他を探さなければなりません。ヒント：構造の不一致をプロファイリングの前にキャッチするために、初期の開発スプリントに拡張機能を追加し、R3F重視のワークフローのデバッグフェーズをより効率的にします。
