日々是好日~every day is a good day~

日常の中の非日常の備忘録

【JavaScript】球と球の当たり判定

前回の『WebARでシューティングゲーム』のコードをいつものようにアップしようと思ったのですが
未熟なため全体がダラダラと長く やり方が分からなくて古典的な方法を使ったりしている箇所があって これは良くないぞと…
具体例としては当たり判定です 
Unityなら Colliderコンポーネントを追加してスクリプトでOnCollitionEnterを呼べばすぐにできますが
A-FrameもしくはJavaScriptにそんな便利なものがあるのか?
チラッと調べた範囲ではそういうものはなさそうで 仕方がないのでオブジェクトの位置と大きさから計算することにしました
逆に言うとColliderやOnCollitionEnterを知らなくても位置と大きさが分かれば当たり判定はできるということです

赤い球の中心の座標を(x1,y1,z1) 半径をR
青い球の中心の座標を(x2,y2,z2) 半径をrとすると
√(x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)+(z2-z1)*(z2-z1) ≦ R+r
となったとき赤い球と青い球は衝突しているということになります
中学の時に習った三平方の定理ですか(?)理屈はそれです
これをJavaScriptにすると

let distance = Math.sqrt( (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1) + (z2 - z1) * (z2 - z1) );
if (distance <= R+r) {
//衝突した時の処理
}

こいう計算が『WebARでシューティングゲーム』の中で行われているのです