Googleマップ上に自動車を召喚して自由に走行できる「3D自動車シミュレーター」が登場

Unityエンジニアの@korinVRさんが、Googleマップ上で自動車を走らせることができる「3D自動車シミュレーター」を公開しました。道に沿ってGoogleマップ上でドライブするもよし、すべてを無視して爆走するもよしと、遊び方は自由です。

3D自動車シミュレーター on Google Maps - フレームシンセシス
https://framesynthesis.jp/drivingsimulator/maps/

「3D自動車シミュレーター」の使い方は簡単で、サイトにアクセスして「START」をクリック。

「3D自動車シミュレーター」の画面は以下の通り。赤枠部分にあるのがユーザーが操作できる自動車で、矢印キーの左右でステアリングの操作、矢印キーの上下で前進後退が可能。

実際に走り出すと、画面下部の赤枠部分に「現在、時速何kmで走行しているか」が表示されます。

画面右上の「おすすめのロケーション」からは、世界各地のおすすめのロケーションに移動可能。

また、初期状態では「Satellite」が選択されており、航空写真上で自動車を走らせるようになっているのですが……

「Map」をクリックすると、Googleマップの通常地図上で自動車を走らせることができます。

さらに、「Hybrid」をクリックすると、航空写真に地図情報が追加されます。

また、初期状態では地図の北が上方向に固定された「North Up」が選択されているのですが、「Head Up」をクリックすると自動車の進行方向が画面の上にくるようになります。

「Zoom Out」をクリックすると画面がズームアウトしていき、自動車が見えなくなりました。

「Zoom In」をクリックして最大までズームインするとこんな感じ。

「Tilt Down」をクリックするとカメラの位置が地面に近づいていき……

「Tilt Up」をクリックすると、最大自動車の真上までカメラが移動します。

というわけで、実際に「3D自動車シミュレーター」を使ってみると以下のムービーの通りになります。

Googleマップ上で自由に自動車を走らせられる「3D自動車シミュレーター」を使ってみた - YouTube


なお、@korinVRさんによると使用している技術スタックはyarn-webpack-TypeScript、Google Maps API、Three.js、Box2D、PixiJSなど。車の動きにはBox2Dが使用されており、車体とタイヤの4つをセットアップして、物理シミュレーションで動いているとのこと。