React Three Fiberで実現する3D表現の基本と活用法

フロントエンド開発•2025/1/23

React Three Fiberとは

みなさんは、ブラウザ上で3Dモデルを操作したり、マウスの動きにあわせて空間を動かしたいと思ったことはありませんか。そのようなとき、JavaScriptで3D描画を行うための有名なライブラリとして Three.js がよく挙げられます。ただしThree.jsは便利な反面、Reactとの組み合わせでは独自の管理が必要になることもあります。そこで注目されているのが React Three Fiber です。 Reactのコンポーネントとして3Dシーンを表現できるため、Reactの開発スタイルで3Dを扱いたい方にとってはありがたい仕組みではないでしょうか。 DOMのようにJSXを使って3Dオブジェクトを宣言的に配置するので、Reactの知識を生かしながらスムーズに3Dの世界を作ることができます。また複雑な状態管理もReactの仕組みを利用できるので、複数のオブジェクトやアニメーションを扱うプロジェクトでも一貫性のあるコードを書きやすいです。

Three.jsとの関係

React Three Fiberは、内部的にはThree.jsを活用しています。つまり、Three.jsが持つ多数の機能をReactの世界に合わせて扱いやすくラップしているイメージです。 Three.js自体も豊富な機能をもつため、基本を押さえればさまざまな3Dアニメーションを表現できます。一方で、React Three FiberではJSXでカメラやライト、メッシュなどを定義できるので、Reactのコンポーネントとして3Dシーンを組み立てられるのが特徴です。このように「Three.jsがエンジンとして働き、それをReact的に書けるようにしたもの」というのがReact Three Fiberと言えます。もしThree.jsを単独で使う場合には、シーンの初期化やレンダリングループを自前で設定しますよね。しかしReact Three Fiberなら、Reactのレンダリングサイクルと同期してコードを記述できるため、画面更新の仕組みを意識しすぎずに3D表現を行いやすくなります。

Canvasコンポーネントの基本

React Three Fiberのエントリーポイントとして、まずは Canvas コンポーネントを知っておくと良いでしょう。このCanvasは、HTMLのcanvasタグとは別物ですが、内部でThree.jsのシーンやカメラなどを管理してくれます。実務で何かしらの3Dオブジェクトを表示したい場合でも、Canvasコンポーネントが土台として動いてくれるため、初期設定を簡略化できます。使い方はとてもシンプルで、<Canvas> タグを置き、その中に3DオブジェクトをJSXで配置するような形を取ります。通常のReactコンポーネントと同じように書けるので、初心者の方でも「ここに3Dオブジェクトがあるんだな」と視覚的に把握しやすいのではないでしょうか。以下のようなサンプルコードを見てみてください。


import React from "react";
import { Canvas } from "@react-three/fiber";
import { MeshStandardMaterial, BoxGeometry } from "three";

function App() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  );
}

export default App;

上記の例では、箱型の3Dオブジェクトを表示しています。 JSX要素として <mesh> や <boxGeometry> を配置できるのがReact Three Fiberの特徴です。

3Dオブジェクトとアニメーションの扱い

メッシュやジオメトリの基本がわかったら、次に気になるのがアニメーションではないでしょうか。 React Three Fiberには、アニメーションを管理するためのフックとして useFrame があります。 useFrameのコールバック関数内で、回転や位置を制御して動きをつけることが可能です。これにより、Reactのレンダリングサイクルや状態管理と連動させながら動きを実現できるのがポイントです。

たとえば、回転アニメーションをつける場合には以下のように書けます。


import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";

function RotatingBox() {
  const meshRef = useRef();

  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.x += 0.01;
      meshRef.current.rotation.y += 0.01;
    }
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="blue" />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <RotatingBox />
    </Canvas>
  );
}

export default App;

このように useFrame 内で meshRef.current.rotation.x と meshRef.current.rotation.y を更新するだけで、アニメーションします。オブジェクト同士の連動やインタラクションを盛り込めば、Web上でリアルタイムに動く3D表現を手軽に取り入れられるでしょう。

カメラやライトの設定

3Dシーンでは、カメラやライトの設定が欠かせません。 React Three Fiberでは、 Canvas コンポーネントにプロパティを渡して初期カメラを設定したり、JSXで directionalLight や ambientLight といった要素を配置することでライトを制御できます。具体的には、Canvasに camera={{ position: [0, 0, 5] }} のようなオブジェクトを渡すと、カメラを設置する位置を指定できます。また、ライティングも下記のように書くことができます。


<Canvas
  camera={{ position: [0, 2, 5], fov: 60 }}
>
  <ambientLight intensity={0.3} />
  <directionalLight position={[0, 5, 5]} intensity={1} />
  {/* ここに3Dオブジェクトを配置 */}
</Canvas>

ambientLightはシーン全体に均等な光を与え、directionalLightは特定方向からの光を表現します。このあたりを組み合わせると、シンプルな照明から少しリアルな照明まで調整できます。実務ではオブジェクトをどのように照らしたいかによってライトの数や種類を細かく変えると、見栄えの良い3Dシーンを作れるでしょう。

実務で考えられる活用シーン

React Three Fiberは、アニメやゲームだけではなく、さまざまな実務シーンでも役立ちます。特に、商品の3DカタログをWeb上で表示して、ユーザーが自由に回転させたり拡大縮小させたりするようなケースは多いかもしれません。また、建築やインテリアのモックアップをオンラインで共有し、離れた場所にいるメンバーとイメージを共有するという用途も考えられます。さらに、データビジュアライゼーションの分野でも、数値を3D空間で表現することで新たな発見が期待できますよね。 Reactアプリケーションとして組み込める点が便利なので、フロントエンドの一部としてユーザーとのインタラクションを深める手段として活用しやすいでしょう。 Three.js由来の機能や素材がそのまま利用可能なので、ラインやパーティクルといった動きを導入するのも比較的容易です。

3Dモデルのロードにはファイル形式や容量が大きく影響します。必要に応じてファイルを軽量化したり、ユーザーのネットワーク環境を考慮しながらロード方法を調整すると良いでしょう。

一方で、3Dを表示するにはブラウザへの負荷やユーザー端末のスペックにも注意が必要です。実際にリリースするときは、描画負荷を適切に管理しながら機能を実装すると快適に動作させることができます。

開発フローとメンテナンスのポイント

React Three FiberはReactのコンポーネント形式で3D空間を管理できますが、その反面3Dモデルやアニメーションの変化量が大きくなると、コードの整理が必要になってきます。とくにオブジェクトの数が増える場合、どのコンポーネントがどの状態を管理しているのか混乱しやすいかもしれません。そのため、不要な再レンダリングを避ける設計や、適切なコンポーネント分割がポイントになるのではないでしょうか。また、複数のオブジェクト間で動きに依存関係があるときは、まとめて管理する仕組みを用意するとわかりやすくなります。 useFrameであらゆる動きを記述できる一方で、あまりにも多様なアニメーションを一箇所に書くとメンテナンス性が落ちることもあります。 React Three Fiberの公式ドキュメントや、Three.jsのリファレンスをあわせて参照しながら、コードが複雑になりすぎないように気をつけるのが大切ですね。

Canvas内の要素はDOMではなく、Three.jsが管理する3Dオブジェクトになります。Reactのイベントバブリングやスタイリングとは扱いが少し異なるので、独特の挙動を確認しながら実装すると安心です。

今後の機能拡張を見据えて、シーンごと、オブジェクトごと、アニメーションごとにコンポーネントを分けておくと、実装が複雑になってもメンテナンスしやすいでしょう。

まとめ

React Three Fiberは、Reactの文法で3D空間を扱える便利なライブラリです。 Three.jsをベースとしているので、最新のWebGL機能を活用しながら、JavaScript初心者でも比較的理解しやすい形で3Dを表現できます。 CanvasコンポーネントとuseFrameを組み合わせることで、モデリングやアニメーション、カメラの制御などをReactコンポーネント的に扱えるのが特徴ですね。実務では、製品カタログ、建築モデル、データビジュアライゼーションなど幅広い分野での活用が想定されるでしょう。また、アニメーションの制御や状態管理にはReactの技術がそのまま使えるため、3D要素を取り入れたいフロントエンド開発でかなり魅力的ではないでしょうか。

パフォーマンス面やモデルデータの最適化には注意が必要ですが、3D表現を導入するハードルは以前より下がってきています。みなさんもReact Three Fiberを使い、3Dの世界をReactの感覚で作り上げてみてはいかがでしょうか。自分が思い描くアイデアを実際に動かしてみると、新鮮な発見があるかもしれません。