2018マツオソフトウェアブログソフトウェア開発に関連することを発信しています2018年3月18日日曜日グルグル回転している長方形(Rectangle)と線(Ray)の当たり判定3Dで回転しているキューブとRayの当たり判定の背後にある数式がいまいちよく分からなかったのでJavaScriptのCanvasを使って図解してみた。2Dも3Dもテストする軸(Axis)の数が変わるだけで内容は一緒。コードは以下より取得してもらいたい。JSFiddleGitHub(上に同じ)数式の背後にある考えは以下。Intersection以下図解。OriginがRayの起点になっている。directionでRayの方向を指定している。convertYUp(1)));左上のオレンジと黄色の線で囲われている領域がくるくる回転しているRectangleとなる。Originから左上のRectangleに伸びている線(Vector)はRayとRectangleの距離を算出するためのものなので、投げかけているRayとは別物なので注意してほしい。Intersection」と出る)この数式の肝はSlab(オレンジと黄色の線)とRayがいつ(Time)交わるかなので、Timeを算出しないといけない。Timeを求める式は以下。lengthOfDirectionOfRayProjectedOnYAxis;Timeを求める元々の式は以下。Directionの長さSlabの位置を求める式からTimeを求める式に変換すれば前述の式になる。Productを使用すればよい。~まとめ~同一軸上に投影すれば後は単純な長さの比較になるのでTimeが求まると理解するまで悶々と苦しんだけど、今はスッキリ。こんな投げやりな解説で伝わるかははなはだ心もとないけれど、誰かの理解の一助になれば幸い。分からないことありましたらコメントください。Japanウェブアプリ、デスクトップアプリ、モバイルアプリ、ゲームなどを開発しています。