Wawa Sensei logo

React Three Fiberとは何ですか？

コーディングを始める前に、React Three Fiberを使う理由とそれが何であるかを見ていきましょう。

WebGL

WebGLは、互換性のある任意のウェブブラウザ内でプラグインを使用せずにインタラクティブな2Dおよび3DグラフィックスをレンダリングするためのJavaScript APIです。

これは、組み込み機器向けの低レベル3DグラフィックスAPIであるOpenGL ESに基づいています。WebGLは、2Dおよび3Dグラフィックスのハードウェアアクセラレーションによるレンダリングを可能にし、複雑な視覚効果やゲームをブラウザ内でスムーズに実行することができます。

しかし、WebGLのコードを直接書くのは非常に難しく、時間がかかります。そこでThree.jsが登場します...

Three.js

Three.jsは、WebGLを使用してブラウザで3Dグラフィックスを作成およびアニメーション化するためのシンプルなAPIを提供するJavaScriptライブラリです。

WebGLの多くの低レベルの詳細を抽象化しているため、複雑な3Dシーンやアニメーションを簡単に作成することができます。

React Three Fiber

React Three Fiberは、Reactと同様に宣言的な方法でThree.jsを使用できるようにするReactレンダラーです。

これはR3Fと呼ばれることもあります。

R3Fは、meshes、lights、camerasなどのThree.jsオブジェクトに対応する一連のReactコンポーネントを提供し、Reactのコンポーネントモデルを使用して複雑な3Dシーンやアニメーションを構築することができます。

同じ結果を得るためには、React Three FiberのコードはThree.jsのコードよりもはるかに短く、読みやすいです。

ここで、両方のライブラリを使用して立方体を表示するシンプルな例を示します：

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres は、pmndrs としても知られ、React Three Fiber や他の非常に便利なライブラリを担当する非常に活発な開発者の集まりです。以下のライブラリが含まれます。

  • drei: r3fのための役立つhelpersと完全に機能するコンポーネントのコレクション
  • gltfjsx: gltfファイル（3Dモデルのファイル形式）から使用可能なコンポーネントを生成するコマンドラインツール
  • react-spring: スプリング物理学に基づいたアニメーションライブラリ
  • zustand: 小型、高速、スケーラブルなstate-managementソリューション
  • react-xr: R3Fを使用してVRおよびAR体験を簡単に作成するためのReactコンポーネントのセット ほか多数！

このコースでこれらのライブラリのいくつかを使用します。

それらをチェックし、頻繁に更新されているため、新しい機能や改良が追加されるので、定期的に確認することをお勧めします。

代替案

他のフロントエンドフレームワークに対して類似機能を提供する他のライブラリもあります。例えば、Svelte用のThrelte、Vue用のTresJS、およびAngular用のAngular Threeなどです。

最近、pmndrsは drei のバニラバージョンである drei-vanilla もリリースしました。これは、React なしでそのコンポーネントを使用したい人々のためのものです。

< Introduction
Setup >