はじめに
ここ数週間で、Three.jsのOrbitControlsなどを含むjsmディレクトリが頻繁に更新されています。この更新により、いままでよりも簡単に各種カメラコントロールやローダーが利用できるようになりました。
現状（2019/05/15）でのexamples内のモジュールをimportする方法をご紹介します。
環境
この記事はthree.jsの以下のバージョンを元に書かれています。
▼package.json
"three": "0.104.0"
この記事の内容は流動的です。three.jsのバージョンが更新されると指定したクラスが移動したり削除される可能性があります。ご注意ください。
想定する読者
この記事は、現在three.jsを利用しているユーザーを想定して書かれています。
import
公式ドキュメントのImportable Examplesの章に、新たにモジュールのimportの項目が追加されました。
公式ドキュメントの更新は、r104に合わせて4/22に行われています。
例として、OrbitControlsとOBJLoaderは以下のようにimportが可能です。three-jsなど、外部パッケージは必要ありません。
⭕️
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
jsm ディレクトリには、ES6のjsファイルとTypeScript用のd.tsファイルが揃っています。importするだけでそのまま使えます。
@types/threeは非推奨
r104の更新に合わせて@types/threeが非推奨になりました。three.js本体にTypeScript用の型定義ファイルが同梱されるようになったためです。r104環境で@types/threeがインストールされている場合は削除をオススメします。
Three.js r126で、TypeScript型定義ファイルが再度@types/threeに分離されました。(該当issue)
TypeScriptでThree.jsを利用する場合は型定義のインストールが必要です。
以上、ありがとうございました。