Three.jsの軌道表示

とりあえず暫定的にThree.jsで軌道を表示するやつをJS Orbitの下に置いときました。
http://www13.plala.or.jp/rian/jsOrbit/three/?autosize

軸とかラベルとか前部表示だとかなり見づらいです。とは言え不要な情報というのはあまりないので、せいぜいECEFのラベルを消すくらいでしょうか。

フォントの関係でラベルはすべて英語です。間違ってても文句言わないで下さい。そもそも軌道の表示自体が間違ってるかもしれませんが(そのためのページタイトル「ThreeJSの練習」です?)。

黒いところでマウスを動かすと視点を動かすことができるので、見やすい視点を探してみて下さい。画面をクリックすればその位置で視点を固定し、もう一度クリックすれば固定を解除します。

視線固定を解除していて、カーソルがブラウザの外にあるときは自動的に視線を回転させます。フルスクリーンで勝手に回しておけばちょっとした癒やし効果がありそうです(個人の感想です)。


軽く見方を説明しておきます。

まず赤、緑、青の軸はそれぞれX, Y, Zの向きを示しています。

ECIはX+が春分点を向き、ECEIはX+が経度0度を向いています。ECI, ECEFはZ+が北極方向、Yはそれらに直行する軸です。

OrbSという軸はOrbit Surfaceの略で、軌道面になります。

中くらいの白い円・楕円は衛星軌道を示しています。

外側の大きなオレンジの円弧は軌道面に至る回転を示しています。Ω Right Ascensionは昇交点を、i Inclinationは軌道傾斜角を、ω Argument of Perigeeは近点角を示しています。



Three.jsをダウンロードしてきたのがおよそ3日前ですから、初めて触ってからたった3日くらいでこれくらいのモノが作れるようになります。なれてれば半日もかからないと思います。Webブラウザでマルチプラットフォームで動くものがこんなに簡単に作れるんですからすごい時代ですね(ウチのモバイル端末はWebGLに未対応なのでマルチプラットフォームの動作確認はしてないですけども)。

Three.jsはObject3Dで入れ子にできますが、JavaScriptでこれを書くのはかなり面倒です。僕はあんまりGUIツールは好きじゃないのですが、このあたりは木構造で簡単にThree.jsのコードを生成できるようなソフトウェアがあればすごい便利だと思います。そういうのがあれば今回のようなテクスチャのないモノなら10分や20分で作れるだろうなぁ。


とりあえず、後は緯度経度の矢印を作ったりとか、そのあたりでしょうか。
本当は昇交点だったり傾斜角だったりを少しずつ増やしていくアニメーションとかも作ってみたいんですが、リアルタイムに書き換えるのをどうすれば良いのかわからないのでもうちょっとThree.jsを調べてからになると思います。メモリリーク怖い。