私は宇宙が大好きです。大好きなので太陽系をマウスでぐるぐる回して、太陽系の星々を観察できるアプリを開発したので紹介します。
Planet Window
Look out the window into space and explore the solar system in 3D. Rotate planets and discover the wonders of the cosmos.
技術スタック
Go の勉強を兼ねて、以下の技術スタックで開発しています。
- Go
- chi
- SolidJS
- Three.js
遊び方
基本的な操作方法は以下の通りです。
- 画面の回転：マウスをクリックしたまま、画面をドラッグする
- 拡大・縮小：マウスホイールを回して、選択中の星を中心にカメラをズームする
- 星の選択：星をクリックして、選択中の星を切り替える
ウェブアプリなので、スマートフォンからでもアクセス可能ですが、いくつかの 3D モデルを描画している都合上、動作が重くなるため PC 推奨です。
工夫した点
スケールの最適化
星の大きさや太陽からの距離の比率を忠実に再現すると、太陽が巨大すぎて他の星々が視認できなくなる問題が発生したので、「宇宙ヤバイ」感を損なわない範囲でサイズ調整し、観察しやすくしました。
星の視認性の向上
星の位置を把握しやすくするため、星の周りに円を描画し、現在地を直感的に把握できるようにしました。
改善点
星が小さすぎてクリックが難しい問題
星をクリックして選択中の星を切り替えることができるのですが、肝心の星が小さすぎてクリックしづらいという問題があります。この問題を解決するため、星の周囲に描画している円もクリック範囲とするように改善予定です。
星の初期配置や向き
星の初期位置や向きはランダムで設定しているため、月が本来地球に向けない面を向いたりすることがあります。より正確な天体の配置を再現できるよう、今後改善するかもしれません (しない)
このアプリを通じて、一人でも多くの人に「宇宙ヤバイ」を実感してもらえたら嬉しいです！
コメント
コメントを投稿