THREE.OrbitControls

Three.js で便利なOrbitControls

カメラオブジェクトを引数にインスタンスを作成するだけで、
マウス操作によって3D空間をグリグリ操作出来るようになる。

こんな感じで使用する。

new OrbitControls(camera);

前回の記事で問題なく使えていたのだが、
Angular2 のコンポーネント上に実装した時に下記のようなエラーが出て動かなかったので、対処法を記載しておく。

エラー

WEBPACK_IMPORTED_MODULE_2_three_orbit_controls.OrbitControls is not a constructor

前回の記事:
Three.js で始めるマウスでグリグリ

エラーが出ていた状況

前回のTypeScriptのみでやったときは以下の使い方で問題なく動作していたんだけれども、
Angular2 を使って実装した場合にうまくいかなかった。

使っていたパッケージ

npm install --save three-orbitcontrols

こんな感じでインポートしていた。

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

で、以下のように使用するとエラーが発生してしまう。

new OrbitControls(camera);

__WEBPACK_IMPORTED_MODULE_2_three_orbit_controls__.OrbitControls is not a constructor

OrbitControlsが上手くインポート出来ていないんだろうなという感じ。

対処した内容

three-orbitcontrolsではなく、three-orbit-controlsをつかう！

ハイフンがあるかないかだけで、何が違うんだ！という感じ…。

npm install --save three-orbit-controls

インポートの仕方もちょっと癖があるが、
以下のようにする。

import * as THREE from 'three';
import * as controls from 'three-orbit-controls';
const OrbitControls = controls(THREE);

使い方は先ほどと変わらず、以下のコードでOKです。

new OrbitControls(camera);