Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
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のカメラ制御