1. 完成版

See the Pen OrbitControls by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

SterField
ICS MEDIA
初めてのThree.js
CodeGrid

3. 分解してみる

前回、マウス座標を取得し、mousemove イベントを設定しました。

Three.js には、それ以外にも、カメラの動きを補助してくれる、数多くの便利なライブラリがあります。
オライリー本によると

・FirstPersonControls:　１人称視点のシューティングゲームのような動作をするコントロール。　
・FlyControls:　フライトシュミレーターのようなコントロール。
・TrackBallControls:　マウス(またはトラックボール)を使用して、シーン内を移動できるコントロール。
・OrbitControls: 特定のシーンを回る軌道上の衛星をシュミレーションするコントロール。

などなど、これ以外にもたくさんあります。
今回は、OrbitControl.jsを使いましょう。

使い方

使い方は非常にシンプルで、主に、2段階に分かれます。

❶. OrbitControls を読み込む

GitHub OrbitControls.js の約1000行に渡るソースコードをコピーします。

jsディレクトリを作り、OrbitControls.js ファイルを作り、その中に、先ほどコピーした内容を貼り付けましょう。

できましたら、index.html にscript ファイルで、このファイルを呼び込みましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>

    //下記を追加
    <script src="js/OrbitControls.js"></script>

  </head>

これで、使う準備が整いました。

❷. カメラコントローラーを作る

OrbitControls コンストラクタは、下記のように、引数に、camera オブジェクトをとります。

const controls = new THREE.OrbitControls(camera)

See the Pen OrbitControls (experimental) by hiroya iizuka (@hiroyaiizuka) on CodePen.

これで完成です。
こんなに簡単に、OrbitControls を使えるなんて、先人の方々には頭が上がりません。

❸. オプションをつける。

enableDamping と autoRotate、autoRotateSpeed をつけましょう。

enableDamping は、設定することで、ドラッグするときのアニメーションを滑らかにします。
autoRotate は、自動で回転を加える事ができます。

これらを設定するときは、アニメーションの関数内で、controls.update()を書く必要があるので、気をつけましょう。


 const controls = new THREE.OrbitControls(camera);
 controls.enableDamping = true;
 controls.autoRotate = true;
 controls.autoRotateSpeed = 1;


 function renderScene() {
      requestAnimationFrame(renderScene);
      controls.update();
      renderer.render(scene, camera);
 }

See the Pen OrbitControls by hiroya iizuka (@hiroyaiizuka) on CodePen.

いい感じです！
他にも、色々なプロパティがあるので、公式を参考に適宜いじってください。

最終コード

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas class="stage"></canvas>

    <script>
      function init() {
        //レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: document.querySelector(".stage")
        });
        renderer.setSize(window.innerWidth, window.innerHeight);

        //シーンを作成
        const scene = new THREE.Scene();

        starNight();
        function starNight() {
          // 形状データを作成
          const geometry = new THREE.Geometry();

          for (let i = 0; i < 1000; i++) {
            const star = new THREE.Vector3();
            star.x = THREE.Math.randFloatSpread(3000);
            star.y = THREE.Math.randFloatSpread(3000);
            star.z = THREE.Math.randFloatSpread(3000);

            geometry.vertices.push(star);
          }

          // マテリアルを作成
          const material = new THREE.PointsMaterial({
            size: 10,
            color: 0xffffff
          });
          // 物体を作成
          const star = new THREE.Points(geometry, material);
          scene.add(star);
        }

        //カメラを作成
        const camera = new THREE.PerspectiveCamera(
          50,
          window.innerWidth / window.innerHeight,
          0.1,
          2000
        );

        const controls = new THREE.OrbitControls(camera);
        controls.enableDamping = true;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 1;

        camera.position.set(0, 0, 1000);

        //球を作成
        const geometry = new THREE.SphereGeometry(100, 32, 32);
        const material = new THREE.MeshNormalMaterial();
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderScene();

        //アニメーション
        function renderScene() {
          requestAnimationFrame(renderScene);
          controls.update();
          renderer.render(scene, camera);
        }
      }

      window.addEventListener("load", init);
    </script>
  </body>
</html>

OrbitControls は、先人の知恵が詰まった、素晴らしいライブラリでした。
それでは、また明日〜

Three.js で遊び倒す -OrbitControls でカメラを動かそう -

1. 完成版

2. 参考文献

3. 分解してみる

使い方

最終コード