地球を回したら、止まれなくなった話

天文・宇宙部のほうに途中段階を一度公開してはいたのですが、
いろいろ機能を盛り込み、いったん完成としましたので共有します！

ClaudeCodeとThree.jsでISSのビューアを作りました。

地球が、ちゃんと回った。
その上を、ISSが飛んでいる。

ブラウザの画面の中で。
テクスチャ付きで。
ちゃんと、くるくると。

宇宙が好きだから、最初からテーマは「地球とISS」でした。

そのとき思ったんですよね。

「これだけでも、もう十分じゃないか」と。

……最初は。

Three.jsって何？という人のために

Three.jsは、ブラウザの中に3Dを表示するためのJavaScriptライブラリです。

難しそうに聞こえるかもしれないけど、
「npmインストール」とか「ビルド作業」とか、そういうめんどくさいものは一切ナシでも動きます。

HTMLファイルに数行書けば、3Dの地球が回る。

自分はもともとJavascryptも書けるといえば書けるけど、
Three.jsに関しては「なんか3Dなやつ」というイメージしか持ってなかった。
でも、AIに「地球を3Dで回したいんだけど」と話しかけるだけで、
一緒に形にすることができる時代なんですよね。

ISSの現在位置を「本物」にしたくなった

地球とISSは最初から作った。

でも、ISSは「なんとなくくるくる周回してる」だけで、
現実のISSとは全然違う場所を飛んでいる。

……なんか、もったいないな。

そう思って調べたら、ISSの現在位置を返してくれる無料のAPIがありました（wheretheiss.at）。
緯度・経度をリアルタイムで返してくれる。APIキーなし、完全無料。

これを10秒ごとに取得して、地球の向きをその位置に合わせる。

試しに繋いでみたら、
ISSの直下点がインドのあたりに表示された。

……うわ、ほんとにそこにいるんだ。

なんか、感動した。地図上の話が立体になった感じです。

太陽も、月も、本物の方向から光らせたい

ここから、欲望が増殖していきます笑

ISSの位置が本物になった。
じゃあ、太陽の位置は？

ISSに太陽電池パドルがついてるんだから、
太陽が本物の方向から来ないと「らしく」ない。

天文計算をAIに聞きながら実装しました。
「サブソーラーポイント」（太陽が真上にいる地点）を計算式で出して、
そこから地球の表面を照らす方向を決める。

すると——昼夜の境界線（テルミネーターと言います）が、リアルに動くようになった。

「昼の地球」と「夜の地球」が、
今この瞬間の本物の位置で分かれている。

急に、宇宙っぽくなった。

月も同じ。
天文計算の近似式（Meeus簡易式というやつ）で月の位置を算出して、
本物の方向から浮かぶようにした。

「±数度の誤差はあるよ」とAIに言われたけど、
それでも十分に「宇宙にいる感じ」になった。

「次に見える時間、出してほしい」──通過予測を実装した

ここで、ちょっと欲張りすぎかなと思い始めた。

でも、止まれなかった。

「ISSって夜空で見えるじゃないですか。
次に自分のいる場所で見える時間、出せませんか」

AIにそう聞いたら、「SGP4という軌道計算エンジンがあります」という答えが返ってきた。

SGP4——ISSの軌道を、TLE（軌道要素データ）から精密に予測する計算式です。
衛星を追跡するための、れっきとした天文標準。

これをJavaScriptで動く形（satellite.js）でビューアに組み込んで、
96時間先まで30秒刻みで走査する。

条件は2つ。
「ISSが太陽に照らされていること（でないと見えない）」
「観測地が薄明以降であること（明るすぎても見えない）」

この両方が重なったとき——それが「見えるチャンス」です。

東京で試したら、朝の3時37分に仰角14度で通過予定、という結果が出た。

目覚ましセット！！！！で、実際に外に出て、見えた・・・？
た、たぶん！たぶんあれ！きっと・・・

……「自分で作ったもので（たぶん）ISSを見つけた」という経験は、ちょっと忘れられない。

美しくしたい、という欲望が止まらない

機能を実装するたびに、見た目もこだわりたくなってきた。

AIと話しながら、こんな視覚効果を足していきました：

海のサングリント
海面に太陽が反射して、キラッと光る現象。
スペキュラマップ（海だけ光る素材）と鏡面反射の計算で実現しました。
宇宙写真でよく見る、あの輝き。

ターミネーターの夕焼け色
昼夜の境界線（テルミネーター）が、オレンジ色に染まる。
「昼と夜の間」に夕焼けが走る。
現実の大気散乱を近似した演出です。

天の川バンド＋星空3層
背景の星を「等級分布（明るい星は少なく、暗い星は多い）」で並べ直した。
天の川を傾いた大円状に4,500個以上の星で再現。
テクスチャ不要、完全計算で。

軌道パルス
未来の軌道線を、6秒周期で光が走っていく演出。
「ISSがどっちに向かっているか」が直感的に分かる。
（ちょっと見づらいけど）

全部、「やりたいな」と思ったらAIと話して実現してきたものです。

AIがいなかったら、途中で詰んでた

自分で頑張って組んだとしたらものすごい時間がかかって、
いくつかの場面で、自分の力だけなら確実に詰まってたかもしれません。

たとえば——
Three.jsには「対数深度バッファ」という、奥行きを正確に描画するための仕組みがあります。
地球のような「近くて大きいもの」と「月のような遠いもの」を同時に描くと、前後判定がおかしくなる。

実装したとき、月が地球の裏側にあるのにずっと手前に出てきた。

「なぜか」がわからなくて、AIに相談した。

「自作シェーダーに対数深度のチャンクを入れていないからです。
Three.jsは組み込みマテリアルには自動でチャンクを挿入しますが、自作シェーダーには挿入しません。」

……な、なるほど？か、かんぜんにりかい。

4行の追加で直った。

いやー、でもほんと楽しい。
発想や思い付きがすぐ形になり、あーでもない、でもこうしたほうが良いみたいな感じでAIと一緒に作ってるとき特有の感覚——が、なんか楽しいんですよね。

答えを出してもらうのではなく、
「なぜそうなるか」を会話しながら理解していく感じ。

できあがったもの

まとめ：「遊んでいい」と思えた

仕事のためじゃない。
誰かに頼まれたわけでもない。

ただ宇宙が好きで、地球を回したかっただけ。

でもこだわるたびに楽しくなって、
「この機能、難しそうだからやめよう」を何度も「やっぱりやろう」に変えられた。

Three.jsってなんとなくは・・・知ってた。
SGP4やMeeus簡易式なんて知らなかった。

それでも、形になりました。
もっとISS自体をリアルにしたいなーなんて思いつつ。

Three.js、試してみてください！
みんな3Dのもの作りましょう笑

あ、やばい、生成AIパスポート試験が間近なのにまた遊んじゃってる！！