Three.jsのDragControlsとTrackballControlsと一緒に使ってドラッグ＆ドロップをする
three.jsで遊んでいて、勉強のために書籍も買いました。
購入した目的はドラッグ＆ドロップを実現するDragControlsの使い方を知ることだったのですが、その目的は十分に達成できた良い本でした。2016年に出た改訂版です。改定前の本も買えちゃうと思うので注意してください。
で、DragControlsなのですが、ちょっと困った点があるのですよね。この書籍のp.280に書かれているのですが、DragControlsとTrackballControlsを組み合わせて使うと、TrackballControlsの動作中にDragControlsに処理を取られて思ったように動かなくなることがあります。
この書籍にはDragControlsやTrackballControlsのソースコードを変更するしか問題解決できない、と書いてあって、なかば諦めていたのですが、実際にやってみたらちょっとの工夫でまあまあ動作するようになりました。うれしかったのでこのエントリーを書いています。
↑ここにソースコードは書いていますが、DragControlsのdragstart, dragendイベントでTrackballControlsの有効無効を切り替えれば良いようです。
var dragcontrols = new THREE.DragControls(camera, objects, renderer.domElement);
dragcontrols.enabled = true;dragcontrols.on('dragstart', function(e) { controls.enabled = false; });
dragcontrols.on('dragend', function(e) { controls.enabled = true; });
こんなふうに。もしかしたらthree.jsがバージョンアップして、書籍執筆時にはできなかったことができるようになったのかもしれません。
