【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)

WebGL & Three.js

Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。

まずはデモを確認してみましょう。

OrbitControlsとは？

OrbitControlsは、3Dシーン内でのカメラの操作を容易にするためのThree.jsのツールです。
GLSLでやるとかなり面倒なことがとても簡単に実装できます。

Three.jsでOrbitControlsを使ったサンプルデモ

Three.jsでOrbitControlsを使ったサンプルコード

import * as THREE from "three";
// 1. 読み込み
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  const geometry = new THREE.TorusGeometry(10, 3, 200, 20);
  const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    wireframe: true,
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 2. インスタンス化
  // カメラ、キャンバスのDOMエレメント
  const control = new OrbitControls(camera, renderer.domElement);
  // 3. もし慣性が必要ならenableDamping、もしくはautoRotateをtrueにする
  control.enableDamping = true;
  control.autoRotate = true;

  camera.position.z = 30;

  function animate() {
    // 4. enableDampingをtrueにした場合は、updateする
    control.update();
    requestAnimationFrame(animate);
    cube.rotation.x = cube.rotation.x + 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
  }

  animate();

OrbitControlsのポイント

OrbitControlsのポイントを紹介します。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three.jsの基本的な操作の一連の流れがとても短くまとめた記事なので参考にしてみてください。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモもみれる状態にしているので参考にしてみてください。

インポートする

// 1. 読み込み
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

インスタンス化

  // 2. インスタンス化
  // カメラ、キャンバスのDOMエレメント
  const control = new OrbitControls(camera, renderer.domElement);

OrbitControlsは、第一引数にカメラ、第二引数に描写するレンダーのドムエレメントをとります。

オプション:慣性や回転を入れたい場合

  // 3. もし慣性が必要ならenableDamping、もしくはautoRotateをtrueにする
  control.enableDamping = true;
  control.autoRotate = true;

マウスで操作したときにゆっくりととまってほしい場合(慣性)は、enableDampingをtrueにします。
自動で回転して欲しい場合は、autoRotateをtrueにします。
これらのどちらかでもtrueにした場合は、animate関数の中でupdate()してあげる必要があります。

  function animate() {
    // 4. enableDampingをtrueにした場合は、updateする
    control.update();
    ...
  }

これで正常にOrbitControlsが作動します。

まとめ

  • OrbitControlsをthree/examples/jsm/controls/OrbitControls からインポートします。
  • OrbitControlsのインスタンスを作成し、カメラとレンダラーのDOMエレメントを引数として渡します。
  • 慣性効果が必要な場合は enableDamping を true に設定します。
  • 自動回転が必要な場合は autoRotate を true に設定します。
  • OrbitControls が enableDamping または autoRotate を使用している場合、control.update() を呼び出して更新します。

WebGL & Three.js

Posted by devsakaso