このレッスンでは、React Three Fiber が提供する useThree と useFrame フックの使い方とそのタイミングについて学びます。

useThree

useThree は、デフォルトの renderer、シーン、カメラ、ビューポートサイズなどを含む state モデルへのアクセスを提供します。

各 state プロパティの使い方について適宜説明しますが、プロパティの全リストは ドキュメント で確認できます。

これを使用するには、まず @react-three/fiber からインポートし、コンポーネント内で呼び出します:

Copy
import { Canvas, useThree } from "@react-three/fiber";
// ...

const Cube = (props) => {
  const { camera } = useThree();
  // ...
};

// ...

この useThree の使い方も動作しますが、分割代入で取得した値以外の値が変更されたときにもコンポーネントが再レンダリングされます。

代わりに selector パターンを使用して、必要な値だけを取得することができます:

Copy
import { Canvas, useThree } from "@react-three/fiber";

const Cube = (props) => {
  const camera = useThree((state) => state.camera);
  // ...
};

この方法では、camera の値が変更されたときにのみコンポーネントが再レンダリングされます。

ただし、threejs の内部値はリアクティブではないことに注意してください。もし camera.position が変更されても、コンポーネントは再レンダリングされません。（幸いなことに）

これでカメラにアクセスできるようになったので、ズームインやアウトのために fov（視野角）を変更することができます:

Copy
// ...

const Cube = (props) => {
  const camera = useThree((state) => state.camera);

  const updateFov = (fov) => {
    camera.fov = fov;
    camera.updateProjectionMatrix();
  };

  useControls("FOV", {
    smallFov: button(() => updateFov(20)),
    normalFov: button(() => updateFov(42)),
    bigFov: button(() => updateFov(60)),
    hugeFov: button(() => updateFov(110)),
  });

  // ...
};

// ...

注意事項:

• updateProjectionMatrix メソッドは、カメラが変更され更新が必要であることを threejs に伝えるために必要です。
• useControls に最初のパラメータとして文字列値を渡すことで、フォルダごとにプロパティをグループ化できます。

コントロールからカメラの視野角が正しく更新されます

useFrame

Threejs は render-loop ベースのライブラリです。これは、画面に表示されるものが、各フレームでシーンをレンダリングするループの結果であることを意味します。ビデオが 連続した画像の構成 であるように、3Dシーンも 連続したフレーム です。

useFrame フックは、エフェクトの実行、コントロールの更新、アニメーションなど、各レンダリングされたフレームでコードを実行することを可能にします。

60fpsを目指すときは、コールバック が毎秒60回呼び出されます。