A-Frameをつかって物理演算ができるようにしてみます。
ピンに物理的な形状を設定してみて、振る舞いの違いをみてみます。
ピンは細長いひょうたん型で、プリミティブにはそのような形状はありません。
cylinderがふさわしいような気がしますが、自動的に割り当てた場合にどのような形状が割当たるのでしょうか。
例１）shape=auto
autoは使用可能な形状から自動的に選択されます。
demo
boxが選択されたようです。
例２）shape=primitive
primitiveは平面/円柱/球の内、対応するAフレームプリミティブが自動的に使用されます。
demo
boxが選択されたようです。
説明にはboxは候補として書かれていないですが、置いておきましょう。
例３）shape=box
boxを設定します。
demo
ピンの形状にマッチしたboxが設定されました。
例４）shape=hull
hullはシュリンクラップのようなモデルをラップします。
hullという単語には殻や外皮といった意味があります。
demo
レーンをすり抜けていきました。
ボールにhullを設定した時はレーンを転がっていったので、思っていたのと違う感じがします。
例５）shape=mesh
meshはJS物理エンジンでモデル化するのが難しく、特定の他のシェイプを「フォールスルー」し、パフォーマンスに重大な制限があります。
demo
hullと同じように、レーンすり抜けていきました。
ボールにmeshを設定した時もレーンをすり抜けたので、この振る舞いはボールと同じように感じます。
例６）shape=none
noneは衝突ジオメトリを追加しません。
demo
ボールにnoneを設定した時と同様、レーンをすり抜けていきました。
例７）shape=sphere
sphereを設定します。
demo
ピンは球体とは異なるので、違和感が大きいです。
あと、sphereの中心とピンの中心がずれているように見えます。
boxの場合はboxの中心とピンの中心は一致していました。
例８）shape=cylinder
最後にもっとも有力に思っていたcylinderを設定します。
demo
cylinderもsphereと同様に、sphereの中心とピンの中心が一致していません。
まとめ
ピンの物理的な形状は、自動で設定するとboxが選択されてcylinderにはなりませんでした。
そして、今回設定した形状はどれもしっくりきませんでした。
今回みえた課題としては、
- sphereとcylinderを設定した時に、ピンと物理的な形状の中心が一致しない原因が何か
- 複合シェイプを利用する事で、中心の不一致に対応する事もできそう(noneの本来の使い方っぽい)
- hullを設定した時の振る舞いがボールとピンで異なる
があるので、次以降で見ていきます。