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)を設定した場合。 
イマイチ使い所がわかりませんでした。
