のぐそんブログ

暗いおじさんがシコシコ書くブログです。

Three.jsのカメラについて

カメラの定義方法

カメラの基本的な定義方法は下記。 ※レンダーとシーンの作成は割愛

//カメラのパラメーター
var CAMERA_PARAMETER = { 
  fovy: 60,
  aspect: width / height,
  near: 0.1,
  far: 10.0,
  x: 3.0, 
  y: 2.0,
  z: 5.0, 
  lookAt: new THREE.Vector3(0.0, 0.0, 0.0)
 };
 
 //カメラのインスタンスを作成
 camera = new THREE.PerspectiveCamera(
            CAMERA_PARAMETER.fovy,
            CAMERA_PARAMETER.aspect,
            CAMERA_PARAMETER.near,
            CAMERA_PARAMETER.far
        );
 
 //カメラの位置を設定   
 camera.position.x = CAMERA_PARAMETER.x;
 camera.position.y = CAMERA_PARAMETER.y;
 camera.position.z = CAMERA_PARAMETER.z;
 
 //カメラの注視点を設定
 camera.lookAt(CAMERA_PARAMETER.lookAt); 
 
 //レンダーの第2引数で渡す
 renderer.render(scene, camera);

カメラの種類

three.jsにはカメラが2種類あります。

透視投影(PerspectiveCamera)

透視投影とは、近くのものは大きく、遠くのものほど小さく見える通常目で見る状態に近い表現。

new THREE.PerspectiveCamera(fov, aspect, near, far);
透視投影のパラメータ
引数 説明 推奨値
fov fovはField Of Viewの略。これはカメラの位置から見えるシーンの範囲である。例えば人間はおよそ180度のfov(視野角)を持つが、鳥類は360度のfovをもつ場合もある。通常の設定では60~90度の設定が選ばれる。 50
aspect 描画される出力領域の縦横比 window.innerWidth/widow.innerHeight
near nearプロパティはカメラのどのくらい近くからThree.jsが描画を開始するかを指定する。nearより手前にあるものはレンダリングされない。 0.1
far 撮影範囲の最大距離。farより遠くのものはレンダリングされない 2000
zoom zoomプロパティを使用すると、シーンにズームイン、ズームアウトすることができる。1より小さい値を設定するとズームアウト、1より大きい値を設定するとズームイン。負の値を設定すると上下逆に描画される。このプロパティはコンストラクタでは設定できず、カメラ作成後に設定する 1

平行投影(OrthographicCamera)

オブジェクトの大きさが位置によって変化しない状態。どこからみても同じ大きさになる。

 new THREE.OrthographicCamera(left, right, top, bottom, near , far ); 
平行投影のパラメータ
引数 説明 推奨値
left カメラ中心座標からの左側の長さ
right カメラ中心座標からの右側の長さ
top カメラ中心座標からの上側の長さ
bottom カメラ中心座標からの下側の長さ
near 撮影範囲の手前の距離。nearよりも近くにあるものはレンダリングされない
far 撮影範囲の最大距離。farより遠くのものはレンダリングされない
zoom zoomプロパティを使用すると、シーンにズームイン、ズームアウトすることができる。1より小さい値を設定するとズームアウト、1より大きい値を設定するとズームイン。負の値を設定すると上下逆に描画される。このプロパティはコンストラクタでは設定できず、カメラ作成後に設定する 1

カメラの注視点(向いている方向)

camera.lookAt(new THREE.Vector3(x, y, z));

カメラの中心座標を決める

中心座標というよりも、空間の中での上方向をきめます。

設定値は1、-1、0のいずれかを設定します。

 camera.up.set(x, y, z); 

camera.up.set(1, 0, 0)を設定した場合。

camera.up.set(0, 1, 0)を設定した場合。

camera.up.set(0, 0, 1)を設定した場合。

イマイチ使い所がわかりませんでした。