今やっている案件で、いわゆるUnityなどの3Dを操作するEditor機能がほしいなーと思っていて調べてみたところ、そもそもThree.jsのリポジトリにそれを実現するものがすでに入っていました。
実際に適用するとこんな感じになります↓
TransformControls.jsを読み込むと、THREE.TransformControls
クラスが追加されるので、これをnew
します。
controlはtranslate
、rotate
、scale
といったエディタが持っている基本機能を持っていて、control.setMode()
で変更することが出来ます。
controlにはattach
とdetach
メソッドがあり、コントロールさせたいオブジェクトをattach
メソッドに渡してやれば、あとは移動や回転などの操作をTHREE.TransformControls
クラスがすべてやってくれます。