A-Frameをつかって物理演算ができるようにしてみます。
A-Frame側の設定で、ピンの物理的形状とレンダリングされる形状の中心ずれを調整できるか検証します。

例1)複合シェイプのcylinderを利用してoffsetで位置を調整する

設定しました。

demo
位置調整はできました。
ボールを転がしてみましょう。

demo
物理的な形状にboxを指定していた時よりも、衝突時に下端の縁でまわるようになり、よりピンらしくなりました。
が、倒れても起き上がってきます。
しぶといですね。

例2)エンティティを入れ子にしてローカル座標で位置を調整する

設定しました。

demo
こちらの方法でも位置調整はできました。
ボールを転がしてみましょう。

demo
こちらも、衝突時に下端の縁でまわるようになり、よりピンらしくなりました。
そして倒れたら起き上がってこなくなりました!

まとめ

ピンの物理的形状とレンダリングされる形状の中心を揃える為に、2つの手法を試しました。
どちらの方法でも中心を揃える事ができましたが、エンティティを入れ子にする方法だとピンが倒れたままになりました。

普通のシェイプのcylinderと複合シェイプのcylinderで何かが違うようですが、今のところ違いの理由の見当はついていません。
ボーリングっぽい動きをするピンを目指すには、エンティティを入れ子にする方法が良さそうです。

今回はじめて複合シェイプを使いましたが、もっと色々できそうなので、どういったものかもう少し見ていきたいと思います。

元記事はこちら

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる8(ピンの物理的形状の中心)