TypeScriptでThree.jsのOrbitControlsの最新版を使う

背景

TypeScriptでThree.jsのOrbitControlsを使う際、TypeScript用のnpmモジュールで three-orbitcontrols-ts を見つけて導入してみたが、OrbitControls内でwarningを吐いていた。

最後の更新が約3年前で、最新版のThree.jsの処理と噛み合っていなかったことが原因だった。

バージョンの差によるエラーなどは避けたいので、Three.js内の最新のOrbitControlsを参照する方法を探った。

環境

• Webpack, TypeScript, Three.js

package.json

  ...
  "dependencies": {
    ...
    "@types/three": "^0.103.2",
    "three": "^0.109.0"
    ...
  },
  "devDependencies": {
    ...
    "ts-loader": "^6.2.0",
    "typescript": "^3.6.4",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    ...
  },
  ...

方法

threeパッケージ内のjsmからOrbitControlsを参照する。

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

...

const controls: OrbitControls = new OrbitControls(camera, renderer.domElement);
controls.update();