pmndrs/react-three-fiber

これは何？

主な機能

• 01Three.jsのシーンを、Three.jsオブジェクトに直接対応するJSX要素として記述できます。
• 023DオブジェクトでReact stateや、onClick、onPointerOverなどのイベントハンドラーを利用できます。
• 03useFrameフックを使い、レンダーループ内でフレームごとの処理を実行できます。
• 04ライブラリの更新を待たずに、Three.jsのあらゆる機能を利用できます。
• 05別のエントリーポイントを通じてReact Nativeをサポートしています。

ユースケース

• Reactアプリで、インタラクティブな3D製品コンフィギュレーターやデータビジュアライゼーションを構築する。
• 独自のstateやアニメーションを持つ、再利用可能な3D UIコンポーネントを作成する。
• React Nativeのモバイルアプリに3Dシーンを追加する。
• テストレンダラーを使い、Nodeで3Dシーンコンポーネントの単体テストを書く。

クイックスタート

1. 1

   npm でパッケージをインストールします

   npm install three @types/three @react-three/fiber
2. 2

   Canvas を作成し、JSX コンポーネントでシーンをレンダリングします（README の例を参照）

使う前に知っておきたいこと

• !react-three-fiber のバージョンは React のメジャーバージョンに合わせる必要があります。v8 は react@18、v9 は react@19 に対応します。

トピック

よくある質問

react-three-fiber とは？

JSXコンポーネントを使い、宣言的に3Dシーンを構築できるThree.js向けReactレンダラーです。 react-three-fiber (@react-three/fiber) は、Three.js向けのReactレンダラーです。メッシュ、マテリアル、ライトを命令的に作成する代わりに、<mesh /> や <ambientLight /> のようなJSX要素として記述すると、それぞれの要素が対応するThree.jsオブジェクトにマッピングされます。各コンポーネントは独自のReact stateを持ち、ポインターイベントに応答したり、useFrameなどのフックを通じてレンダーループを購読したりできます。

react-three-fiber は無料で使えますか？ライセンスは？

react-three-fiber は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-three-fiber は今もメンテナンスされていますか？

活発にメンテナンス中。react-three-fiber の最終コミットは 2026年10月21日 です。

react-three-fiber は何に使えますか？

Reactアプリで、インタラクティブな3D製品コンフィギュレーターやデータビジュアライゼーションを構築する。 独自のstateやアニメーションを持つ、再利用可能な3D UIコンポーネントを作成する。 React Nativeのモバイルアプリに3Dシーンを追加する。 テストレンダラーを使い、Nodeで3Dシーンコンポーネントの単体テストを書く。

react-three-fiber のインストール方法は？

npm でパッケージをインストールします: npm install three @types/three @react-three/fiber Canvas を作成し、JSX コンポーネントでシーンをレンダリングします（README の例を参照）

react-three-fiber はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pmndrs/react-three-fiber