GitHub で React Three Fiber を見る
React Three Fiber は、Web で広く使われている 3D ライブラリ Three.js 用の React レンダラーです。オープンソース集団 Poimandres（pmndrs）が作っています。
これはエージェントのスキルではなく、コードライブラリです。欲しい 3D シーンを説明すれば、AI エージェントがコンポーネントを書きます。
MIT ライセンスで無料です。2026年10月28日時点で、リポジトリには GitHub で約33,000個のスターが付いていました。
何をするか
- Three.js のあらゆるオブジェクトが JSX 要素になります。メッシュもライトもカメラも、ほかのコンポーネントと同じように書けます。
- オブジェクトは状態やクリック、ホバーに反応でき、それぞれが毎フレーム独自のアニメーションを実行できます。
- README によると、Three.js で動くものはすべてここでも動き、シーンは React の外で描画されるためオーバーヘッドもありません。
- React Native でも動きます。
これで追加できるもの
訪問者が回せる製品モデル、3D のヒーローセクション、見出しの後ろの小さなアニメーションなどです。周辺には大きなエコシステムがあり、Drei は便利な既製ヘルパーを、ほかのパッケージはポストプロセス効果、物理演算、VR や AR を追加します。
先に知っておきたいこと
バージョンは React のバージョンに合わせる必要があります。バージョン8は React 18 と、バージョン9は React 19 と動きます。README には、始める前に React と Three.js の両方を知っておくべきだとも書かれています。エージェントがコードを書く場合でも、何を作っているかを理解しておくと役立ちます。3D シーンはページも重くするので、スマートフォンでの読み込みを確認しましょう。
インストール方法
npm install three @types/three @react-three/fiberあとはエージェントに欲しいシーンを頼むだけです。たとえば、ドラッグすると回る自社製品のモデルなど。