Babylon.jsで簡単に3D空間のドラッグ&ドロップ(改善版)

前回の記事の改善版です。

akiyah.hatenablog.com

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

ベースはPointerDragBehaviorに乗っかりますが、

pointerDragBehavior.moveAttached = false;

として、PointerDragBehaviorの振る舞いは止めています。その上でpointerDragBehaviorのonDragStartObservable、onDragObservable、onDragEndObservableに動作を加えています。

ドラッグスタート時にマウス(とカメラを結んだ光線)と対象オブジェクトの交点を計算して、そこにmarkオブジェクトを置きます。そのmarkオブジェクトと対象オブジェクトをjointで繋ぎます。

ドラッグしたら、markオブジェクトをマウスの動きに応じて移動します。(この辺りにコツがあるのですが、、、細かい点はソースをみて欲しいです。)そうすると、markオブジェクトに引きずられて対象オブジェクトが移動するのです。

点と点をjointでつないでいるので、対象オブジェクトをマウスでつかんだ点を持っているような感覚が表現できます。PointerDragBehaviorを素朴に使うと、その辺り、動きが変なのですよね。

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

jointを作る時に、BABYLON.PhysicsJoint.PointToPointJointを使ったのですが、この時のパラメーターとしてmaxForceを小さめにして指定しています。こうしないとマウスでドラッグした瞬間に対象オブジェクトがブルっと震えて隣り合ったオブジェクトを弾き飛ばすと言う振る舞いをしてしまったんですよね。詳細な振る舞いはわかっていないのですが、今のところmaxForceを小さめにしておけば良いので、保留にしています。(maxForceを小さめにすることで動きがちょっと悪くなるのですが、それはトレードオフとして今は目をつぶっています。)

 

ひとまずここまででBabylon.jsドラッグ&ドロップは一区切りにしようと思っていましたが、テンセグリティに応用する時に二つのポインターを扱うという欲望も出てきてしまったので、もうちょっとやってみます。

 

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

f:id:Akiyah:20200228003407p:plain

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.jsthree.js を組み合わせてドラッグ&ドロップを作っていた時はいろいろ苦労したのに、こんな簡単にできるなんて。。。

akiyah.hatenablog.com

↑苦労していた頃。

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

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

スライム方程式

ブログ書くのが久しぶりになっちゃったので、リハビリ的な内容です

 

こんな事をしていました。スライム方程式です。

 作り方の動画も作ってみました。

 

Maker Faire Tokyo 2019にベランダラボというチーム名でテンセグリティの展示をします

makezine.jp

どうぞよろしくです。

 

f:id:Akiyah:20190711161247p:plain

Instagramの写真を送ったら、右矢印のアイコンも画像に載っちゃったみたいで、なんか変な感じになっちゃいました。すいません。

アイス棒で12本のテンセグリティを作る。ダブルクリップによる改善編

akiyah.hatenablog.com

の続きです。

このときは苦労したけど、ゼムクリップを使う方法を思いついてだいぶ楽になりました。

 

step1

www.instagram.com

 

step2

www.instagram.com

 

前回はダンボールの欠片と輪ゴムをジグにしたのですが、ダブルクリップで止めることで固定しました。最終的な形にならない状態から少しづつ組み上げられるので、だいぶ楽になります。

アイス棒で12本のテンセグリティを作る

akiyah.hatenablog.com

の続きです。アイス棒6本のテンセグリティはだいぶ慣れたので前のエントリーのように作れるのですが、アイス棒12本のテンセグリティはまだ自分の中で作り方が定まっていないし、手探りで苦労しながら作っています。

下のように作っています。写真が何枚かあって、最後が動画です。 

www.instagram.com

アイス棒6本のときと、流れは同じです。まずアイス棒の両端をハトメパンチで穴を開けます。その後、(ここが大変なのですが)ダンボールの欠片と輪ゴムをジグとして使って、なんとかがんばって12本を出来上がりに近い形に固定します。固定したらモビロンバンドをつけて、輪ゴムを切ってダンボールの欠片を外して完成です。

ジグを使ってアイス棒12本を形にするのがすごく大変で、もっといいジグがあれば楽できるのになーと思っていますが、まだいいアイデアはありません。

 f:id:Akiyah:20190331233736j:plain

テンセグリティを10分でアイス棒とモビロンバンドで作る

www.instagram.com

最近はこのテンセグリティを好んで何度も作っています。

アイス棒6本の両端をハトメパンチで丸く穴を開けて、モビロンバンドを引っ掛けてテンセグリティにしています。出来上がる形がきれいになるので、大好きです。

アイス棒6本は輪ゴムで固定しておいて、モビロンバンドをつけたあとに輪ゴムを切って固定を外すのがコツです。

動画にしました。慣れたので10分で完成させています(ノーカットです)。

youtu.be

材料と道具 

モビロンバンド 折径55mm 透明  50g(約550本)入り

モビロンバンド 折径55mm 透明  50g(約550本)入り

 

モビロンバンド。折径55mmのものを使っています。 

松尾物産 木製 アイススティック棒 (50本束) 114mm 0836-0902

松尾物産 木製 アイススティック棒 (50本束) 114mm 0836-0902

 

アイス棒。娘が大量に買ったものを少しもらって作っています。 

コクヨ ハトメパンチ 15枚 穴径5mm ヒン-M200

コクヨ ハトメパンチ 15枚 穴径5mm ヒン-M200

 

ハトメパンチ。上についている穴あけの部分を使っています。切れ味がするどいので、アイス棒に見事に穴を開けてくれます。