Three.js

【Three.js】カメラの制御例

どうも、とがみんです。

この記事では、カメラを制御するにあたって、マウスの動きに応じてカメラを動かしたり、オブジェクトの周りを周回させたりと、いくつか例をいくつか紹介していきます。

カメラの設置

カメラは以下のコードで設置されます。

カメラの制御例

中心を向いてカメラを周回させる

立方体を3次元空間の中心に置き、その周りを円を描きながらカメラが周回しています。

以下のコードは、カメラがxz平面を半径1の円を描くように動作するようにしているコードです。
camera.lookAt(new THREE.Vector3(0, 0, 0));のコードにより、カメラは常に原点を見つめています。

以下のボタンを押すと立方体が表示されます。その立方体の周りをカメラが周回するように動いています。


マウスの位置でカメラの位置を制御する

マウスの動きに合わせて、カメラが動くようにします。

マウスをX軸方向に動かした時に、カメラが動くようになっています。マウスの位置に応じて、原点を向いたカメラが、xz平面上を半径1の円を描くように動作します。

以下のボタンを押すと立方体が記事中に表示され、マウスの動きに応じて回転します。


マウス操作によるカメラの制御

カメラをドラッグにより回転させたり、2本指でピッチすることによって、3Dオブジェクトからカメラを遠くに離したり、近づけたりできるようにします。

これを作成するにあたって、OrbitControls.jsを使用します。
以下のGithubのexamples/js/controlsフォルダの中に、OrbitControls.jsがあるので、そのファイルを読み込みます。

https://github.com/mrdoob/three.js

下記コードを記述すると、ドラッグにより回転させたり、遠くに離したり、近づけたりできるようになります。

以下のボタンを押すと立方体が表示され、マウスで操作することができます。


まとめ

カメラをオブジェクトの周りを回転させたり、マウスの動きに合わせてうガス方法について紹介しました。

参考文献

>Three.jsのカメラ制御