three.jsのカメラについて教えてもらいました

Three.jsでは、以下のような種類のカメラがあります。

• PerspectiveCamera: 透視投影のカメラ

• OrthographicCamera: 平行投影のカメラ

• ArrayCamera: 複数のカメラのレンダリングを同時に行うためのカメラ

• CubeCamera: キューブマップを生成するためのカメラ

• StereoCamera: ステレオカメラ

それぞれについて簡単に説明します。

PerspectiveCamera

PerspectiveCameraは、視野角、アスペクト比、nearクリップ面、farクリップ面を指定することで、透視投影のカメラを生成することができます。

const camera = new THREE.PerspectiveCamera(
  fov, aspect, near, far
);

fov: 視野角（度数法）

• aspect: カメラの縦横比

• near: クリップ面からの最小距離

• far: クリップ面からの最大距離

OrthographicCamera

OrthographicCamera（正射影カメラ）: カメラから見たオブジェクトの距離によらず、オブジェクトを等しい大きさで描画するカメラです。遠近感の表現が必要ない場合や2D描画を行う場合に適しています。引数はPerspectiveCameraとほぼ同様で、左端から右端までの幅、上端から下端までの高さ、nearクリップ面、farクリップ面を指定します。

const camera = new THREE.OrthographicCamera(
  left, right, top, bottom, near, far
);

• left: 左端のX座標

• right: 右端のX座標

• top: 上端のY座標

• bottom: 下端のY座標

• near: クリップ面からの最小距離

• far: クリップ面からの最大距離

ArrayCamera

ArrayCamera（アレイカメラ）: 複数のカメラを使って一度に複数の画角をレンダリングするカメラです。複数のカメラオブジェクトを配列で渡し、その配列を引数に指定します。また、アレイカメラを使用する場合、各カメラのビューにはターゲットカメラと呼ばれるカメラを使用する必要があります。

const cameras = [
  new THREE.PerspectiveCamera(45, width / height, 1, 1000),
  new THREE.PerspectiveCamera(45, width / height, 1, 1000),
  new THREE.PerspectiveCamera(45, width / height, 1, 1000)
];

const arrayCamera = new THREE.ArrayCamera(cameras);

CubeCamera

CubeCamera（キューブカメラ）: 6面のテクスチャを生成するカメラです。主にキューブマップの生成に用いられます。引数としてカメラからどの距離のキューブ面を撮影するか、解像度を指定します。

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128 );
const cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );

cubeCamera.position.set(0, 0, 0);

near: クリップ面からの最小距離

• far: クリップ面からの最大距離

• renderTarget: キューブマップの出力先

StereoCamera

StereoCamera（ステレオカメラ）: ステレオビジョン用の2つのカメラを組み合わせて使うカメラです。引数として、視差（眼球間距離）を指定します。ステレオカメラは主にVRやARの開発に用いられます。

const stereoCamera = new THREE.StereoCamera();
stereoCamera.aspect = width / height;
stereoCamera.eyeSep = 0.03; // 眼球間距離
stereoCamera.focalLength = 15; // 焦点距離