【Three.js】マウスでカメラの動きを制御するOrbitControls【ソースコード付き】

スポンサーリンク
Three.js

マウスでカメラを制御したいけど、どうすればいいの?

こういったお悩みに解決いたします。

3次元のコンテンツを開発には、カメラの制御は必要不可欠ですよね。

方法は様々です。

マウスで制御するのか、キーボードで制御するのか、一人称視点なのか三人称視点なのか…。

今回は一人称視点で、マウスで制御する方法をお教えします。

Three.jsのOrbitControlsという機能を使用します。

簡単なソースコードも記載していますので是非参考にしてみてください。

当記事を読むと、

  • OrbitControlsの使い方が分かる
  • 一人称視点でマウスでカメラを制御することができる
スポンサーリンク

OrbitControlsの導入と基本的な使い方

OrbitControls.jsは公式サイトからダウンロードできるファイル一式に含まれています。

パスは以下のようになっています。

three.js-master/examples/js/controls/OrbitControls.js

読み込み方法は普段と同じです。

<script src="./three.js-master/examples/js/controls/OrbitControls.js"></script>

操作方法は以下の表のとおりです。

操作方法挙動
左ドラッグ回転
右ドラッグ平行移動
マウスホイールズームイン(アウト)

後ほどデモでお試しいただけますので、操作感はそちらで味わってみてください。

スポンサーリンク

簡単なサンプルで実際に制御してみる

とてもシンプルなサンプルで試してみましょう。

ソースコードは以下になります。

(この記事のソースコードを基盤として作成しています)

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<!DOCTYPE html>
<html>
  <head>
    <title>three.js Sample</title>
    <meta charset="utf-8">
    <script src="./three.js-master/build/three.min.js"></script><!--three.jsライブラリの読み込み-->
    <script src="./three.js-master/examples/js/controls/OrbitControls.js"></script><!--OrbitControls.jsの読み込み-->
  </head>
  <body style="overflow: hidden;"><!--スクロールバーが出る方はoverflowをhiddenに設定すると消えます-->
    <script>
      const scene = new THREE.Scene();  //シーンを作成
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);  //カメラを作成
      const renderer = new THREE.WebGLRenderer(); //レンダラーを作成
      const controls = new THREE.OrbitControls(camera, renderer.domElement);  //カメラにOrbitControls機能を付与
      const boxGeometry = new THREE.BoxGeometry(100, 100, 100); //boxの形状データ
      const boxMaterial = new THREE.MeshNormalMaterial(); //boxの材質(マテリアル)情報
      const box = new THREE.Mesh(boxGeometry, boxMaterial); //形状と材質から実際の3Dオブジェクトを生成
      init();
      animate();

      function init(){    //初期化用関数
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.BasicShadowMap;
        document.body.appendChild(renderer.domElement); //canvas要素をbodyタグに追加
        camera.position.set(0, 0, 500);
        scene.add(box);
      }

      function animate(){
        renderer.render(scene, camera);
        requestAnimationFrame(animate); //毎フレーム呼び出すことで描画
      }
    </script>
  </body>
</html>

デモを見たい方はこちらをクリック(ページは遷移しません) ⇒

OrbitControlsの使い方はとてもシンプルです。

scriptタグの4行目にあたりますが、OrbitControlsのインスタンスを生成する際にカメラを渡してあげることで、カメラにOrbitControlsの機能が付与されるというわけです。

注意ですが、インスタンス生成時に、第2引数としてHTML要素(↑のコードではrenderer.domElement)を指定するのを忘れないようにしてください。おそらくエラーが出るはずです。

OrbitControls.jsの中でいくつかのイベントリスナをその引数で与えたHTML要素に登録しているためです。

renderer.domElement は、シーンがレンダリングされるcanvas要素を表していますので、これを渡しておけば問題ないです。

まとめ

いかがでしたでしょうか。

制御の方法には、OrbitControlsだけでなく様々な種類があります。

・PointerLockControls

・FirstPersonControls

以上です。

Three.jsの学習におすすめの書籍はコレ!

・はじめてのThree.js

この本には、Three.jsを用いてコンテンツを開発する際に、必要な情報がほぼすべて盛り込まれています。

Three.jsをここまで詳しく解説している本はおそらくこれしかないです。

私は大学4年生からの研究活動でThree.jsを用いていますが、初めての学習でこの本を使用しました。

自分が必要な情報をかいつまんでその都度学習することもできますが、私個人としては、一通り目を通してThree.jsでできることをざっと把握することをおすすめします。

なぜなら、できることの全貌を知っている方が、アイデアの幅が広がり設計・コーディングもしやすくなるからです。

ぜひ一度お調べになってみてはいかがでしょうか。

コメント

タイトルとURLをコピーしました