three.jsのすすめ – カメラを自由に動かす

前回は、three.jsで利用できるカメラについてお伝えしました。今回は、そのカメラをマウス等の操作で簡単に動かすためのヘルパークラスであるOrbitControlsをご紹介したいと思います。

ライブラリの読み込み

OrbitControlsクラスはthree.min.jsには含まれていないため、別途読み込む必要があります。three.js導入時にダウンロードしたZipファイルのexamples/js/controlsフォルダにあるOrbitControls.jsをコピーして使用します。

OrbitControlsの使用

OrbitControlsを使用するには、基本的にOrbitControlsクラスをカメラを引数として初期化するだけです。

以下が、簡単な立方体を表示させたときのコードにOrbitControlsを追加したコードになります。

…実は、このコードではカメラは動きません。

アニメーションの設定

今まで登場したコードでは、renderメソッドを一度しか呼んでいないため、カメラやシーンに含まれる物体の移動・変化が反映されていませんでした。リアルタイムにこれらを描画するためには、requestAnimationFrameメソッドを利用します。以下が修正したコードになります。(ちなみにrequestAnimationFrameはthree.jsではなくhtml自体の実装です。)

操作方法

マウス、タッチデバイスおよびキーボードでの操作に対応しています。

マウス タッチデバイス(スマートフォン等) キーボード
Orbit(周回) 左クリックして動かす 一つの指で動かす
Pan(平行移動) 右クリックして動かす 三つの指で動かす 矢印キー
Zoom(拡大・縮小) 中クリックして動かす、または、マウスホイールを操作する 二つの指でピンチアウト・イン

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

OrbitControls利用時は、CameraのlookAtメソッドが正しく動作しません。代わりにtargetプロパティ(Vector3オブジェクト)に対して座標をセットすることで、カメラを特定の座標に向けることができます。

この際、updateメソッドを呼ぶ必要があります。

以上のように、OrbitControlsを利用すると非常に簡単にカメラをコントロールできるようになり、3Dモデルをぐるぐる回すような演出を導入することができます。


“three.jsのすすめ – カメラを自由に動かす” への1件の返信

コメントを残す

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