LoginSignup
14

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-05-08

カメラの"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

threejs_icosahedron.png
>>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);

}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14