2013/07/30

[three.js] PerspectiveCameraの属性をイジる。

Three.jsには、Cameraがあります。
そこから派生した2つのカメラオブジェクト、
それぞれ、「正射影カメラ」、「透視投影カメラ」と呼ばれているようです。
今回は、後者のPerspectiveCamera、すなわち、「透視投影カメラ」のパラメータを弄ってみました。

Perspective Camera

人間の目で見えるように描画する。
つまり、同じ大きさの物体であれば、カメラから近いものほど大きく、遠いものほど小さく見える。

Perspective Cameraのパラメータには、

fov
field of view. y軸(縦)方向の画角(視野角)。
コレが大きいと、いわゆる広角になり、小さいと望遠になる。
aspect ratio
描画空間(xy面)のアスペクト比、つまり横/縦。
near
描画空間(手前側の面)の視点からの距離
far
描画空間(奥側側の面)の視点からの距離

があります。
これらの組み合わせが、描画する空間にどう作用するのかを確認するため、右のようなパラメータをイジる画面を表示するコードを書いてみました。

結果は、 let's play with cameras!にあります。
WebGLに対応したブラウザで見ていただければ、と思います。

0 件のコメント: