読者です 読者をやめる 読者になる 読者になる

のぐそんブログ

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

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 aspect near far
視野角(0~90) アスペクト比 撮影範囲の手前の距離。nearよりも近くにあるものはレンダリングされない 撮影範囲の最大距離。farより遠くのものはレンダリングされない

平行投影(OrthographicCamera)

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

 new THREE.OrthographicCamera(left, right, top, bottom, near , far ); 
平行投影のパラメータ
left right top bottom near far
カメラ中心座標からの左側の長さ カメラ中心座標からの右側の長さ カメラ中心座標からの上側の長さ カメラ中心座標からの下側の長さ 撮影範囲の手前の距離。nearよりも近くにあるものはレンダリングされない 撮影範囲の最大距離。farより遠くのものはレンダリングされない

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

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

設定値は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)を設定した場合。

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