three.jsのすすめ – カメラの設置

前回は、three.jsを利用して簡単な立方体を表示させる手順についてお伝えしました。おさらいをすると、three.jsで3Dモデルを表示させるための基本的な流れは

1. シーンの作成
2. カメラの作成
3. メッシュ(物体)を作成してシーンへ追加
4. レンダラーを作成して描画

となります。今回は、ステップ2のカメラの作成について詳しく見ていきたいと思います。

(シーンの作成に関しては、特に重要なオプションはないため割愛しますが、詳しくはthree.jsの公式ドキュメントをご参照ください。)

カメラの種類

現在、three.jsで利用できるカメラには、次の三つの種類があります。

PerspectiveCamera(透視投影カメラ) カメラから遠くにある物体ほど小さく描画される、自然な見た目に近いカメラ。
OrthographicCamera(平行投影カメラ) カメラからの距離に関わらず、物体が同じ大きさで描画されるカメラ。昔のシムシティ等、疑似3Dグラフィックゲームのような見た目になる。
CubeCamera(立方体カメラ) 環境マッピング(物体の表面に周辺環境の映り込みや屈折を疑似的に表現する方法、車のボンネットに空の画像を映す等)を行うためのカメラ。

この中でよく使われる、PerspectiveCameraとOrthographicCameraについて、個別に見ていきます。

PerspectiveCamera(透視投影カメラ)

前回使用したのが、こちらのカメラになります。直方体を映すと、下の図のように遠くにある部分が小さく描画されることが分かります。

PerspectiveCameraオブジェクトは以下のように作成します。

コンストラクタの引数は次の通りです。

引数 説明 デフォルト
fov Field of viewの略で水平方向の視野角(垂直方向に関しては、fovとaspectの組み合わせで決定される) 50
aspect 描画される領域の縦横比 1
near どのくらい近くから描画するか 0.1
far どのくらい遠くまで描画するか 2000

全体のコードは以下になります。

OrthographicCamera(平行投影カメラ)

OrthographicCameraで先ほどの直方体を映したものが以下となります。カメラからの距離に関わらず、物体の大きさが同じに描画されていることが分かります。

OrthographicCameraは以下のように作成します。

コンストラクタの引数は以下の通りです。

引数 説明 デフォルト
left 描画される領域の左限
right 描画される領域の右限
top 描画される領域の上限
bottom 描画される領域の下限
near どのくらい近くから描画するか 0.1
far どのくらい遠くまで描画するか 2000

全体のコードは以下になります。

共通のプロパティ

以下のプロパティに関しては、PerspectiveCameraとOrthographicCameraに共通して使われます。

プロパティ 説明 デフォルト
position カメラの位置(Cameraのプロパティというよりは基底クラスであるObject3Dのプロパティ) (0, 0, 0)のVector3オブジェクト
zoom 対象の拡大率。負の値をセットすると上下が反転します。 1

使い方は次のようになります。

zoomを設定した後は、updateProjectionMatrix()を呼ぶ必要があります。

特定の座標にカメラを向ける

カメラはデフォルトでシーンの中心(0, 0, 0)を向いています。特定の座標にカメラを向けるにはlookAt()メソッドを利用します。引数はVector3オブジェクトです。

この例では、座標(100, 100, 100)に対しカメラを向けています。

以上がカメラの基本的な使い方になります。指定するパラメーターは多くないものの、期待した通りの絵を映すのはなかなか難しいかと思います。カメラに限定されませんが、色々なオブジェクトのプロパティの値をテストできるツールをthree.jsが提供していますので、こちらで試してみるのも良いと思います。

https://threejs.org/editor/

次回は、今回扱ったカメラをマウスやキーボードで自由に動かすことができる、OrbitControlsというヘルパークラスをご紹介したいと思います。


“three.jsのすすめ – カメラの設置” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です