【Three.js】Three.jsでOrbitControlsを使用する方法

2021年5月15日2021年6月12日

久々にThree.jsを触ってみたら書き方が大きく変わっていて苦労したので覚え書き。

まずはThree.js Fundamentalsの「基礎知識」から、3Dのキューブを表示させるコード。

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js</title>
</head>

<body>
    <canvas id="c"></canvas>
</body>

<script type="module">
    import * as THREE from './three.module.js';

    function main() {
      const canvas = document.querySelector('#c');
      const renderer = new THREE.WebGLRenderer({canvas});

      const fov = 75;
      const aspect = 2;
      const near = 0.1;
      const far = 5;
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.position.set(0, 0, 3);

      const scene = new THREE.Scene();

      const color = 0xFFFFFF;
      const intensity = 1;
      const light = new THREE.DirectionalLight(color, intensity);
      light.position.set(-1, 2, 4);
      scene.add(light);

      const boxWidth = 1;
      const boxHeight = 1;
      const boxDepth = 1;
      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

      const material = new THREE.MeshBasicMaterial({color: 0x44aa88});

      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      renderer.render(scene, camera);
    }

main();
</script>
</html>

ディレクトリの構成は以下のように、index.htmlファイルと同じディレクトリ内にthree.module.jsファイルを配置する。

次にOrbitControlsを追加したコード。

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js</title>
</head>
<body>
    <canvas id="c"></canvas>
</body>

<script type="module">
    import * as THREE from './three.module.js';
    import { OrbitControls } from './OrbitControls.js';  //OrbitControlの中身も書き換える

    function main() {
      const canvas = document.querySelector('#c');
      const renderer = new THREE.WebGLRenderer({canvas});

      const fov = 75;
      const aspect = 2;
      const near = 0.1;
      const far = 5;
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.position.set(0, 0, 3);

      const controls = new OrbitControls(camera, canvas); //ここに2行追加
      controls.update();

      const scene = new THREE.Scene();

      const color = 0xFFFFFF;
      const intensity = 1;
      const light = new THREE.DirectionalLight(color, intensity);
      light.position.set(-1, 2, 4);
      scene.add(light);

      const boxWidth = 1;
      const boxHeight = 1;
      const boxDepth = 1;
      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

      const material = new THREE.MeshBasicMaterial({color: 0x44aa88});

      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      //以下を追加
      function render() {
        renderer.render(scene, camera);
      }

      render();

      controls.addEventListener('change', render);
    }

main();
</script>
</html>

ディレクトリの構成は以下のように同じディレクトリにOrbitControls.jsを配置する。

ただしOrbitControls.jsは内部にthree.module.jsへのパスがあるので、そこを書き換える必要がある。
OrbitControls.jsを開き、9行目の「’../../../build/three.module.js’」を同じ階層に配置した場合は「’./three.module.js’」に変更する。