A-Frameをつかって物理演算ができるようにしてみます。
今回はボールの形状を検証します。
ボールは球体なのでsphereなのですが、変更したらどうなるのか試してみます。
例１）auto
autoは使用可能な形状から自動的に選択します。
sphereが選択されるのでしょう。
demo
前回と差はなさそうですが、debugモードでワイヤーフレームも表示させて確認してみます。
demo
sphereが選択されています。
例２）primitive
primitiveは平面/円柱/球。対応するAフレームプリミティブで自動的に使用されます。
こちらも自動的にsphereが選択されるのでしょう。
demo
やはりsphereでした。
autoと差はあるのでしょうか、もう少し複雑な形状で試すと違いがわかるかもしれません。
追々、ピンにも形状を設定して試してみたいと思います。
例３）sphere
sphereにsphereを設定してもsphereでしょうが、とりあえずやります。
demo
やはりsphereでした。
sphereの説明には、boxを参照してください。sphereRadiusオプションを追加します。とあります。
box云々はちょっと置いておいて、sphereRadiusを試してみましょう。
とりあえずsphereRadiusに1を設定してみます。
demo
浮きました。
どういう事でしょうか、デバッグモードにしてみましょう。
demo
なるほど、本体の球よりも大きな球状の当たり判定ができているようです。
本体のsphereのradiusが0.2で、sphereRadiusが1なので、本体の5倍のサイズの当たり判定ができたようです。
例４）box
boxを試します。ハルまたはトリメッシュのシェイプと比較して優れたパフォーマンス。カスタムモデルに適合可能。という事です。
よくわからないですが、やってみます。
demo
sphereの周辺にboxの当たり判定ができました。
同じ力を加えていますが、四角いので転がりにくくなりました。
例５）cylinder
cylinderを試します。boxを参照してください。cylinderAxisオプションを追加します。
やってみます。
demo
cylinderが飛んでいきました。
丸いところではなく、角ばったところで転がろうとしてしまっています。
きっとcylinderAxisを設定すれば、丸い側で転がるのでしょう。
cylinderAxisにzを設定してみます。
demo
丸い側で転がりましたが、sphereと比べて転がりが甘い感じがします。
例６）hull
hullを試します。シュリンクラップのようなモデルをラップします。凸形状は、Trimeshよりもパフォーマンスが高く、より適切にサポートされていますが、動的オブジェクトとして使用すると、パフォーマンスに多少の影響がある場合があります。
説明はよくわからないですが、hullという単語には殻や外皮といった意味があるようです。
demo
sphereより多くのポリゴンが使われていて、処理落ちがおこっています。パフォーマンスに多少の影響があるという説明はこういう事なのでしょう。
例７）mesh
meshを試します。非推奨です。トリムッシュは、カスタムジオメトリ（a .OBJまたは.DAEfile）に適合するように適応しますが、サポートは非常にわずかです。任意のトリムシェイプは、JS物理エンジンでモデル化するのが難しく、特定の他のシェイプを「フォールスルー」し、パフォーマンスに重大な制限があります。
demo
ボールが消えました。
手前から奥に向かってはいるので力は加わったのでしょうが、レーンとの当たりは発生しないようです。
これも追々みていこうと思います。
例８）none
形状としてnoneです。衝突ジオメトリを追加しません。shapeコンポーネントまたはカスタムJavaScriptを使用して、衝突形状を手動で追加するときに使用します。
通常はこのままでは利用しないもののようですが、どうなるか試してみます。
demo
ボールが手前から奥にいかず、真下に落下しました。
球体はレンダリングされていますが、当たり判定をあらわすワイヤーフレームもレンダリングされていません。
物理的な影響を受けないという事のようですが、staticな物体とは異なり重力の影響は受けているようです。
まとめ
ボールは元々sphereを使っているので、あらためて物理演算用の形状を指定する必要はなさそうです。
今後はピンにも物理演算用に形状を設定してみて、どのように形状が自動設定されるかを確認してみます。
元記事はこちら
「A-FRAME: 物理演算でボーリングっぽい動きを実現してみる２（ボールの形状）」
