カメラコントロール

Starter pack

3Dシーンでカメラを配置し、アニメートするために、いくつかの方法を発見しました。

カメラの位置と回転を手動で設定する。
OrbitControlsのような様々な種類のコントロールを使用する。

しかし、時にはカメラをより細かく制御する必要があり、それを正確に行うには多くのコードと計算が必要です。幸いなことに、それを助けるライブラリが存在します。

今回使用するライブラリは camera-controls です。これは、さまざまなカメラの動きとアニメーションを非常に簡単に行うことができる小さなライブラリです。

偶然にも、Drei はこのライブラリのラッパーを持っているので、少しのコードで使用することができます。

スタータープロジェクト

このライブラリのさまざまな機能を発見するために、新しいiPhone 15 Pro Max Blackを紹介する素敵な3Dスライダーを作成します。

新しいiPhone 16がリリースされた時は、このレッスンを更新するので連絡してください 🤭

スタータープロジェクトは以下を含みます。

Apple iPhone 15 Pro Max Black モデル by polyman. ライセンスは Creative Commons Attribution。
後でプロジェクトに追加する Tailwind CSS で作成されたスライダーを含むUIコンポーネント。

iPhone 15 Pro Max Black

現在はiPhoneモデルのみを見ることができます

さあ、カメラコントロールを使って遊び始めましょう。

Controls

カメラコントロールを有効にするためには、スタータープロジェクトに既に含まれている OrbitControls をDreiの CameraControls コンポーネントに置き換える必要があります。

また、後でアクセスしてそのメソッドを使用できるようにコントロールへの参照を追加します。

Experience.jsx:

// ...
import { CameraControls } from "@react-three/drei";
import { useRef } from "react";

export const Experience = () => {
  const controls = useRef();
  return (
    <>
      <CameraControls ref={controls} />
      {/* ... */}
    </>
  );
};

このようにすることで、OrbitControls と大きな違いは特に見受けられません。カメラの回転、パン、ズームは引き続き行えます。

APIも、多くのコントロールが共通しており、distance、zoom、polarAngle、azimuthAngleなどのプロパティを持っています。

CameraControls コンポーネントが特に優れているのは、カメラをアニメートしたい場合です。

利用可能なすべてのコントロールについて説明することはしませんが、最も一般的なコントロールを見ていきます。完全なリストは camera-controls ドキュメントで確認できます。

Dolly

dolly コントロールを使うことで、カメラを前後に移動させることができます。

Leva を使って、カメラを前後に移動させるボタンを追加してみましょう:

// ...
import { button, useControls } from "leva";

export const Experience = () => {
  // ...

  useControls("dolly", {
    in: button(() => {
      controls.current.dolly(1, true);
    }),
    out: button(() => {
      controls.current.dolly(-1, true);
    }),
  });
  // ...
};

dolly メソッドの第一引数は、カメラを動かしたい距離です。第二引数は、動きをアニメーションさせるかどうかを示すブール値です。

これでカメラが前後に移動できるようになりました

OrbitControls を使って同じ結果を得たい場合は、カメラとターゲットの新しい位置を計算する必要があります。その後、カメラとターゲットを新しい位置にアニメーションさせる必要があります。

Truck

truckコントロールを使用すると、カメラの向きを変えずに、カメラを上、下、左、右に移動させることができます。

dollyコントロールと同様に、truckコントロールを試すためのボタンを追加してみましょう：

// ...

export const Experience = () => {
  // ...
  useControls("truck", {
    up: button(() => {
      controls.current.truck(0, -0.5, true);
    }),
    left: button(() => {
      controls.current.truck(-0.5, 0, true);
    }),
    down: button(() => {
      controls.current.truck(0, 0.5, true);
    }),
    right: button(() => {
      controls.current.truck(0.5, 0, true);
    }),
  });
  // ...
};

truckメソッドの最初の2つの引数は、カメラを移動させたい水平および垂直の距離です。3つ目の引数は、移動をアニメーション化するかどうかを示すブール値です。

水平および垂直の距離に異なる値を使用することで、カメラを斜めに移動させることも可能です。

Rotate

Camera Controlsは、OrbitControlsでマウスをドラッグする際の動きのように、カメラをターゲットの周りでプログラム的に回転させる方法を提供します。

Orbit rotation schema

カメラをターゲットの周りで回転させるボタンを追加しましょう:

// ...

export const Experience = () => {
  // ...
  useControls("rotate", {
    up: button(() => {
      controls.current.rotate(0, -0.5, true);
    }),
    down: button(() => {
      controls.current.rotate(0, 0.5, true);
    }),
    left: button(() => {
      controls.current.rotate(-0.5, 0, true);
    }),
    right: button(() => {
      controls.current.rotate(0.5, 0, true);
    }),
  });
  // ...
};