【Three.js】マウスとキーボードでカメラを制御するFirstPersonControls【ソースコード付き】

スポンサーリンク
Three.js

マウスとキーボードでカメラを制御したいけどどうしたらいいの?

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

開発するコンテンツに合わせて、カメラの操作方法はその都度変えていかなくてはなりません。

ぜひ、今回紹介する制御方法を試してもらえたらと思います。

当記事は、一人称視点でマウスとキーボードを用いて制御する方法です。

マウスは視点の回転、キーボードは移動を担っています。

PointerLockControlsにとても似ていますが、視点回転のクセが若干異なります。

PointerLockControlsを試してみたい方は以下の記事を参考にしてみてください。

後半には、ソースコードを載せております。

当記事を読むと、

  • FirstPersonControlsの使い方が分かる
  • 一人称視点でマウス&キーボードでカメラを制御することができるようになる
スポンサーリンク

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

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

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

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

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

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

操作は、マウスで視点の回転、キーボードで視点の移動になります。

キーと移動の対応は以下の通りです。

キー移動方向
↑ or W
← or A
↓ or S
→ or D
R
F
スポンサーリンク

PointerLockControlsとの違い

冒頭でFirstPersonとPointerLockは似ているが若干異なると言いました。

両者の特徴を詳しくみていきます。

PointerLockControls

  • マウスポインタの移動とともに視点を回転する
  • デフォルトでは、移動機能は備わっていない(自身でスクリプトで追加する必要あり)

FirstPersonControls

  • マウスポインタの位置に従って視点を回転する
  • デフォルトで移動機能が備わっている

ここで着目していただきたいのは、マウスによる視点の回転についてです。

PointerLockではマウスの移動とともに視点が回転しますので、マウスポインタが止まると当然視点の回転も止まります

一方、FirstPersonでは、マウスの位置(厳密に言うと、中心からマウスの座標に向かうベクトル)に従って視点が回転するため、マウスポインタが止まっていても、位置によっては視点が回転します

すごく流動的に視点が動くので、人によっては酔うだろうなという印象です。

以下の公式のデモページで試してみてください。

three.js examples

実際にカメラを制御してみる

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

各行で何をしているかはコメントに記してありますので参考にしてみてください。

<!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/FirstPersonControls.js"></script><!--FirstPersonControls.jsの読み込み-->
  </head>
  <body style="overflow: hidden;"><!--スクロールバーが出る方はoverflowをhiddenに設定すると消えます-->
    <script>
      const scene = new THREE.Scene();  //シーンを作成
      const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);  //カメラを作成
      const renderer = new THREE.WebGLRenderer(); //レンダラーを作成
      const controls = new THREE.FirstPersonControls(camera, renderer.domElement);  //カメラにOrbitControls機能を付与
      const boxGeometry = new THREE.BoxGeometry(100, 100, 100); //boxの形状データ
      const boxMaterial = new THREE.MeshNormalMaterial(); //boxの材質(マテリアル)情報
      const box1 = new THREE.Mesh(boxGeometry, boxMaterial); //形状と材質から実際の3Dオブジェクトを生成
      const box2 = new THREE.Mesh(boxGeometry, boxMaterial);
      const box3 = new THREE.Mesh(boxGeometry, boxMaterial);
      const clock = new THREE.Clock();
      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);
        box1.position.set(0, 0, 0);
        box2.position.set(200, 0, 500);
        box3.position.set(-200, 0, 500);
        scene.add(box1); scene.add(box2); scene.add(box3);
        controls.lookSpeed = 0.01;  //マウスを動かしたときの視点移動の速度
        controls.movementSpeed = 1.0; //キーボードによる平行移動の速度
      }

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

いつもならこのページで試せるようにデモを載せているのですが、動かなかったので今回はなしになります。

ローカル環境では上記のコードで動作確認できていますので安心してください。

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

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

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

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

視点の回転速度や平行移動速度を変更したいときは、lookSpeedプロパティとmovementSpeedプロパティの値を変更しましょう。

他にも多数プロパティは存在しますので、一度公式ドキュメントに目を通すことをオススメします。

three.js docs

まとめ

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

カメラの制御方法には、FirstPersonだけでなく様々なものがあります。

・OrbitControls

・PointerLockControls

以上です。

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

・はじめてのThree.js

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

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

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

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

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

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

コメント

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