Three.jsのTrackballControlsの使い方

Three.jsでオブジェクトを動かしたり視点を移動させるときに便利なのがTrackballControls。利用するには、Three.jsのサイトからダウンロードできるThree.jsライブラリ圧縮ファイル内に含まれるTrackballControls.jsを読み込む。場所はthree.js-master\examples\js\controls\TrackballControls.js。

使うのに最低限必要なことは以下の3点のみ。

１．TrackballControls.jsの読み込み

HTMLに以下のコードを記述する。
<script src="TrackballControls.js"></script>

２．TrackballControlsインスタンスの作成

Threeのカメラ（camera）を渡してTrackballControlsインスタンスを作成する。
var controls = new THREE.TrackballControls( camera );    

３．アップデート

レンダリングループ内でアップデートする。
controls.update();

・サンプルの表示

以上だけでも十分使えるが、移動速度などを変えたいときもあるので、使えるプロパティやメソッドを知っておくと便利。

プロパティ（設定値はデフォルト値）

rotateSpeed = 1.0; // 回転速度

zoomSpeed = 1.2; // ズーム速度

panSpeed = 0.3; // 移動速度

noRotate = false; // 回転の有効／無効

noZoom = false; // ズームの有効／無効

noPan = false; // 移動の有効／無効

minDistance = 0; // ズームの最小距離

maxDistance = Infinity; // ズームの最大距離

メソッド

reset() // カメラを初期位置（TrackballControlsインスタンス 作成時の位置）に戻す

dispose() // イベントリスナーの削除