three.jsのOrbitControlsをTypescriptで使う方法

詰まったのでメモ。

webpack + three.jsで開発していたので、htmlに <script src="js/controls/OrbitControls.js"></script> とは書きたくなかったので、なんとかしてnpmパッケージで解決した。

three-orbitcontrols-tsをインストールする。

$ yarn add three-orbitcontrols-ts

three-orbitcontrols をインストールすると、@types/three-orbitcontrols が存在しないので型チェックができないため、最初から three-orbitcontrols-ts を入れてしまうのが良さそう。

tsファイルでインポートして使用する。

index.ts

import * as THREE from "three";
import { OrbitControls } from "three-orbitcontrols-ts";

const init = () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

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

  // カメラを作成
  const camera = new THREE.PerspectiveCamera(50, width / height);
  camera.position.set(0, 0, 1000);
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.update();
  ...
};

window.addEventListener("DOMContentLoaded", init);

three-orbitcontrols-ts が2年近くメンテナンスされていないのが心配だけれど、 @types/three-orbitcontrols が出るまではしばらく使っていきたい。