2020-09-12に更新

VRキャップ投げシミュレータ

「2」人いなくてもできるVRキャップ投げシミュレータ

作ったもののURL

既存のサイトの中の1機能として新規に作りました。
キャップ野球情報局内VRキャップ投げコーナー

なぜ作ったか

キャップ野球情報局というWEBサービスを開発・運営しています。
コロナの影響でなかなか集まって試合などが難しい状況で、何か面白いことないか...「オンラインキャップ投げ」やろう!という案が出ていたのですが、そもそもどうやるのかという話から進んでいませんでした。
web1weekが始まる少し前にA-Frameを使ってVR選手ロッカーを作っていた関係で、「ひょっとしてリアルタイムでなければできるのでは...?」と思って着手した次第です。

できること

  • オリジナル変化球の作成・保存
  • 他の人が作ったオリジナル変化球を打つことができる

後のセクションでキャップ投げシミュレータの原理について触れていますが、

  • 初速
  • 射出角(上下・左右)
  • スピンの大きさ
  • キャップの傾き(前後・左右)

という6つのパラメータを決定するだけでシミュレーションが可能です。

使い方

使った技術

フロント
- NextJS
- A-Frame
- firebase

サーバサイド
- NodeJS
- MySQL
- Docker

1weekで端折った機能

  • 打撃シミュレーション
  • 打球シミュレーション
  • オリジナル変化球削除機能

キャップ投げをリアルにシミュレーションする

このシミュレータを作るのに一番大変だったことですか?
揚力とかマグヌス効果という空気力学とか流体力学など専門外の知識を自分の中に落とし込んでパラメータ調整することですね。

このセクションは今回のシミュレータを作るにあたって用いた力学や数学の式なので、原理がどうなっているか興味のある方だけ読んでいただければと思います。


ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

コメント