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