react-three-fiberは、Three.jsのシーンを宣言的にJSXで記述できるReactレンダラーです。公式説明では「There is no overhead. Components render outside of React」とされ、パフォーマンスオーバーヘッドがないこと、Three.jsで動作するものは例外なく動作することが特徴として挙げられています。React 18/19の両方に対応し、React Nativeでも利用可能です。

GitHub上でのスター数は32.1k、フォーク数は2.0k、ウォッチャー数は215です。React 18には@react-three/fiber@8、React 19には@react-three/fiber@9がそれぞれ対応するバージョンとして用意されています。

出典が伝えている要点

  • react-three-fiberは"A React renderer for Three.js"と説明されている
  • react-three-fiberでは宣言的にシーンを構築できる
  • react-three-fiberは状態に応じて反応する再利用可能で自己完結したコンポーネントとして機能する
  • 公式説明によれば"There is no overhead. Components render outside of React"とされ、パフォーマンスオーバーヘッドがないとされている
  • 公式説明によればスケーリングにおいてプレーンなThree.jsを上回るとされている
  • 公式説明によれば"Everything that works in Threejs will work here without exception"とされ、Three.jsで動作するものは全て動作するとされている
  • react-three-fiberは"It merely expresses Threejs in JSX"という仕組みで、新しいThree.jsバージョンに自動的に対応するとされている
  • GitHub上でのスター数は32.1kである
  • GitHub上でのフォーク数は2.0kである
  • GitHub上でのウォッチャー数は215である
  • React 18と@react-three/fiber@8がペアで対応している
  • React 19と@react-three/fiber@9がペアで対応している

原文より

A React renderer for Three.js
There is no overhead. Components render outside of React
Everything that works in Threejs will work here without exception

出典: github.com

← 2026.09.06 の号を通しで読む