share facebook facebook facebook twitter twitter menu hatena pocket slack

2019.12.11 WED

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

松本 勝年

WRITTEN BY 松本 勝年

A-Frameをつかって物理演算ができるようにしてみます。
ピンに物理的な形状を設定してみて、振る舞いの違いをみてみます。

ピンは細長いひょうたん型で、プリミティブにはそのような形状はありません。
cylinderがふさわしいような気がしますが、自動的に割り当てた場合にどのような形状が割当たるのでしょうか。

例1)shape=auto

autoは使用可能な形状から自動的に選択されます。

demo
boxが選択されたようです。

例2)shape=primitive

primitiveは平面/円柱/球の内、対応するAフレームプリミティブが自動的に使用されます。

demo
boxが選択されたようです。
説明にはboxは候補として書かれていないですが、置いておきましょう。

例3)shape=box

boxを設定します。

demo
ピンの形状にマッチしたboxが設定されました。

例4)shape=hull

hullはシュリンクラップのようなモデルをラップします。
hullという単語には殻や外皮といった意味があります。

demo
レーンをすり抜けていきました。
ボールにhullを設定した時はレーンを転がっていったので、思っていたのと違う感じがします。

例5)shape=mesh

meshはJS物理エンジンでモデル化するのが難しく、特定の他のシェイプを「フォールスルー」し、パフォーマンスに重大な制限があります。

demo
hullと同じように、レーンすり抜けていきました。
ボールにmeshを設定した時もレーンをすり抜けたので、この振る舞いはボールと同じように感じます。

例6)shape=none

noneは衝突ジオメトリを追加しません。

demo
ボールにnoneを設定した時と同様、レーンをすり抜けていきました。

例7)shape=sphere

sphereを設定します。

demo
ピンは球体とは異なるので、違和感が大きいです。
あと、sphereの中心とピンの中心がずれているように見えます。
boxの場合はboxの中心とピンの中心は一致していました。

例8)shape=cylinder

最後にもっとも有力に思っていたcylinderを設定します。

demo
cylinderもsphereと同様に、sphereの中心とピンの中心が一致していません。

まとめ

ピンの物理的な形状は、自動で設定するとboxが選択されてcylinderにはなりませんでした。
そして、今回設定した形状はどれもしっくりきませんでした。

今回みえた課題としては、

  • sphereとcylinderを設定した時に、ピンと物理的な形状の中心が一致しない原因が何か
  • 複合シェイプを利用する事で、中心の不一致に対応する事もできそう(noneの本来の使い方っぽい)
  • hullを設定した時の振る舞いがボールとピンで異なる

があるので、次以降で見ていきます。

元記事はこちら

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

松本 勝年

松本 勝年

フロントエンドに興味があるエンジニア

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。