three.jsのOrbitControls.jsで簡単にカメラをマウスコントロールする

カメラの"orbit"というのは「移動」と訳されます。けれど具体的には、立体を中心にして周回軌道を描くように映すことです。3次元JavaScriptライブラリthree.jsに含まれるOrbitControls.jsを使えば、このオービットのほか、ズームやパンもマウスで簡単に操作できます。

OrbitControls.jsを使う準備

OrbitControls.jsは、three.jsライブラリの「examples/js/controls/」に納められているJavaScriptファイルです。これを<script>要素で読み込みます。たとえば、「js」というフォルダに納めたらつぎのように書き加えます。

<script src="js/OrbitControls.js"></script>

three.jsの3次元空間に立体をつくるコードは、jsdo.itに公開した正二十面体のサンプル「three.js r85: Rotating a icosahedron」を使うことにします(サンプル001)。光源がなくても発色するマテリアルMeshNormalMaterialを用いたので、コードは40行足らずです。この立体のつくり方については、「three.js入門 03: ジオメトリーを使う」をお読みください。

サンプル001■three.js r85: Rotating a icosahedron

>>jsdo.itへ

OrbitControlsでカメラをコントロールする

OrbitControls()コンストラクタは、つぎのようにCameraオブジェクトを渡して呼び出します。 OrbitControls.autoRotateプロパティにtrueを与えると、カメラはゆっくりと周回します。この場合、アニメーションの再描画メソッドの中からOrbitControls.update()メソッドを呼び出してください。

new THREE.OrbitControls(カメラ)

カメラを動かすためのマウス操作は、つぎのとおりです。

• オービット: ドラッグ
• ズーム: ホイール
• パン: 右ボタンドラッグ

前掲サンプル001は、つぎのように手直しすればよいでしょう。OrbitControlsを加えたサンプルは、jsdo.itに「three.js r85: Controlling the camera with OrbitControls」として掲げました。

var controls;
function init() {

    camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);

    controls = new THREE.OrbitControls(camera);
    controls.autoRotate = true;

    update();
}

function update() {
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.01;
    controls.update();
    requestAnimationFrame(update);

}