Three.js で描画された3D空間を、マウスでグリグリ操作するための記事です。

これで、自由に3D空間を見渡す事ができますよ。

なんと!
そんな機能はすでにThree.js の方で用意されているのだ。

OrbitControls というもので、
カメラから生成しておくだけで、もう充分使えるようになっている。

Three.js の便利コントローラ

カメラ操作のような視点を変えるのだけじゃなく、
3Dオブジェクトを選択して、自由にドラッグしたりするコントローラも用意されている。

以下のようなものが用意されている。

• TrackballControls (トラックボールでの操作)
• OrthographicTrackballControls
• FlyControls (カーソルキーによる浮遊した操作ができる)
• OrbitControls (マウスドラッグに追従する)
• PointerLockControls (マウスを非表示にして、マウス動きに追従する)
• FirstPersonControls (FPS視点でポインタしたところに向く)
• DragControls (オブジェクトをマウスドラッグする)
• TransformControls (オブジェクトを平行移動、回転、スケールする)

インポートして使うだけ

今回使いたかったのは、OrbitControlsというもの。

new THREE.OrbitControls(camera) とするだけでよい。

...と思ってたけど、TypeScriptを使っているせいか、
インポートがうまくできない。涙
(余計なところでつまづいた。)

THREE.OrbitControls is not a constructor

THREE is not defined

そもそも、import, from, export とか、TypeScriptの動作をよくわかっていない。
ちゃんと勉強しなくては。。。

こうしたらうまくいった。

three.js の exsamples にorbitcontrolsが同梱されているんだが、
うまくインポートする事が出来なかった。

結局、npm で three-orbitcontrols というパッケージになっているのをインストールする。

npm install --save three-orbitcontrols

import文もうまくいかなかったので、結局require文を使って取り込んだ。

// three.js のインポート
let THREE = require("three");

// OrbitControls用のインポート
let OrbitControls = require("three-orbitcontrols");


// カメラからコントローラを生成するだけ。
let controls = new OrbitControls(camera);

これだけで、マウス操作によってカメラが自由に操作できる。

ふぅ〜