three.jsで太陽系を作ってみる

と、意気込んでみたのはいいものの。
結構ソースがでかくなってしまいました。

作るだけなら簡単なんですよ。球8個作って並べて公転させればそれっぽいし。
でもここからテクスチャ貼って自転入れて視点移動入れてとか凝りだすと
javascript+three.jsでも結構大変です。

まあでもやりました。やってやりましたよ。これです。



黒い棒にしか見えませんが、左から右に向かって太陽系の惑星が並んでます。
左の黄色いドットが太陽。一番右側には海王星があります。あるんです。

いやー、宇宙のスカスカ具合、甘く見てた。
全部視野に入れようとすると見えなくなるほどだとは。

知識では知ってたしmitakaでも知ってたはずなのに、
自分でやってみるとやっぱ実感が違いますね。
大きさはともかく距離遠すぎるんですよあなたたち。特に木星以降。
計算してみると、地球を1ドットで表現すると太陽から海王星まで
35万ドット必要らしい。320Kテレビでも足りんわ。

まあ言ってても太陽系が縮んでくれるわけでもなし。
仕方ないので距離と大きさをそれぞれ3乗根して色々追加したのがこちら。



開始時点では惑星直列状態ですが、
しばらくぼーっと見ていればなんかそれっぽくなります。
※ ちなみに右ドラッグは速度調整になってます。

これ、距離と大きさ以外にも色々嘘をついてまして。

公転は楕円じゃなく真円にしてるし（楕円の位置計算面倒だったので）
環境光なんてほんとは無いに等しいし（裏面が見えないのは寂しかったので）
惑星直列なんて実際起こったこと無いし（なので右上の日時は西暦ではなくただの目安）

そもそも公転方向とか傾き方向とかちゃんと合ってるか分からないっていうね。
まあでもそれっぽいからよいかな。うん。


ソースは大きく分けて
1.HTML系
2.共通系（他のthree.js使うときにも使いそうなの）
3.メイン
の３つ。

メインは更に細かく
3-1.太陽系情報準備
3-2.three.js準備
3-3.星のジオメトリ作成
3-4.宇宙作成
3-5.メインループ
って感じです。

宇宙入れると一気にそれっぽくなりました。テクスチャ凄いな！

    
    


    
    
    Result

しかし300行も書くことになるとは思わんかったなあ。
まあDirectXでやってたら桁違いだったろうけど。