スポンサーリンク

WebGLでtree.js+OrbitControls.js

OrbitControls.jsを使うとかなり簡単にマウスドラッグでカメラ回転がで着るようになる。

準備

ダウンロード

以下より、three.js-master.zipをダウンロードし展開する。

https://threejs.org/

コピー&ペースト

以下サイトのCubeを表示するHTML+JavaScripファイルを作り.htmlファイルで保存する。

https://ics.media/tutorial-three/camera_orbitcontrols/

注意

そのままコピペすると以下のエラーが出る。

THREE.OrbitControls: The second parameter “domElement” is now mandatory.

恐らく原因は、three.jsはweb上の指定バージョンの物を使っているのに、OrbitControls.jsはダウンロードした最新バージョンを使っていて、かつ、自分で書いたスクリプトの部分が古いバージョンに対応したコードになっているから。

before

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="js/controls/OrbitControls.js"></script>
    <script>

        // ...

// カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera); // ...
</script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>

after

なのでthree.jsもダウンロードしてorbitcontrols.js共にローカルのファイルを使用して、スクリプト本体もdomElement指定を追加してやる。

<html>
  <head>
    <meta charset="utf-8" />
    <script src="three.js-master/build/three.min.js"></script>
    <script src="three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script>

        // ...

// カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera,renderer.domElement); // ...
</script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>

コード

上にも書いたが、domElementを渡していないソースコードが多いが、最新のバージョンではこれが必須になっているらしい。

<html>
  <head>
    <meta charset="utf-8" />
    <script src="three.js-master/build/three.min.js"></script>
    <script src="three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script>
      // ページの読み込みを待つ
      window.addEventListener('load', init);

      function init() {
        // サイズを指定
        const width = 960;
        const height = 540;

        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: document.querySelector('#myCanvas')
        });
        renderer.setSize(width, height);

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

        // カメラを作成
        const camera = new THREE.PerspectiveCamera(45, width / height);
        // カメラの初期座標を設定
        camera.position.set(0, 0, 1000);

        // カメラコントローラーを作成
        const controls = new THREE.OrbitControls(camera,renderer.domElement);

        // 形状とマテリアルからメッシュを作成します
        const mesh = new THREE.Mesh(
          new THREE.BoxGeometry(300, 300, 300),
          new THREE.MeshNormalMaterial()
        );
        scene.add(mesh);

        tick();

        // 毎フレーム時に実行されるループイベントです
        function tick() {
          // レンダリング
          renderer.render(scene, camera);
          requestAnimationFrame(tick);
        }
      }
    </script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


この記事のトラックバックURL: