Babylon.jsで簡単に3D空間のドラッグ＆ドロップ

Babylon.js をちょっと触ってみました。

テンセグリティをコンピューター上でシミュレートするという私の要望があるのですが、なかなか進められていないので、それを進めるための調査でもあります。 やりたいこととしては、物理エンジンでゴムorバネを使うこと、カメラの移動、マウスでドラッグすることなどですが、とりあえずドラッグ&ドロップができればいいなと思ってやってみました。

やってみると、 Babylon.js ではドラッグ＆ドロップはかなり簡単でした！

See the Pen babylon drag test v3 by mizukoshi akiya (@akiyah) on CodePen.

scene.enablePhysics とすれば cannon.js を使った物理エンジンが使えるようになるし、 ArcRotateCamera を使えばマウスで視点移動ができるカメラが使えるし、 PointerDragBehavior を使えばドラッグ＆ドロップも使えるようになりました。

cannon.js とthree.js を組み合わせてドラッグ＆ドロップを作っていた時はいろいろ苦労したのに、こんな簡単にできるなんて。。。

akiyah.hatenablog.com

↑苦労していた頃。

ただ、、、 この PointerDragBehavior を使ったドラッグ＆ドロップは、ちょっと甘いところがあるんですよね。 物理エンジンとあわせて使うことをあんまり意識していないのだと思うのですが、変な動きすることがあります。

簡単に直せるかな、と思って研究中ですが、全然簡単ではなさそうなので、長期戦を覚悟しています。