AstroCast ができるまで — データ可視化 2本目を 太陽系 3D で開く

AstroCast は、 Three.js + WebGL で太陽系 3D シミュレーター。 太陽 + 8 惑星 (水星〜海王星) + 月 をリアルタイムに公転 / 自転、 時間スピードを 1× 〜 100,000× で切替、 各惑星をクリックすると実天体データを表示。 ラボ 24本目、 データ可視化 thesis の 2本目 (WikiOrbit に続く)。

なぜこの形にしたか

直近 5本の SHIP は (arcana-flip: 占い / gift-cap: 計算 / pile-park: シミュ / tone-quest: 学習 / type-forge: ジェネレーター)。 直近 5本に データ可視化 ゼロ → §3.1 OK で 2本目を打てる。

候補比較:

• 太陽系 3D シミュレーター (採用)
• 企業ロゴ進化図 (タイムライン、 SEO 中)
• GitHub Trending マップ (dev 寄り)
• 世界の今 / 地球儀リアルタイム

選んだ理由:

• wow が最強 (太陽系全体が手元で公転 + 自転、 SNS シェア性高)
• 教育系で恒常的 SEO 需要 (子供向け天文教材 / 学校現場)
• Three.js を type-forge から別アングルで再利用できる (3D テキスト → 太陽系で 「同じスタックで別ジャンル」)
• 既存大手 (NASA Eyes / Solar System Scope) は重いビルド / アプリ DL、 軽量で差別化

visual direction — §6.1 Visual Audit 9本目の適用

直近 5本の visual を書き出す:

arcana-flip — midnight black + plum + antique gold + crimson (中世大聖堂)
gift-cap — 墨 + 朱 + 生成り + 茜 + 金箔 (和風 巻物 / 朱印)
pile-park — cream + coral + mint + lemon + indigo (玩具箱 sandbox)
tone-quest — wine burgundy + ivory + gilt (コンサートホール classical)
type-forge — charcoal + ember orange (warm-dark industrial 鍛冶)

題材 「太陽系 / 天体 / 観測」 → motif は 天文台 / HUD / 観測パネル:

• midnight space 漆黒の宇宙
• 太陽の暖色 emission orange
• 星空 (procedural star field 1,600 点)
• 観測 HUD 風 cyan ラベル
• 望遠鏡 brass (telescope dial 風 corner stamps)

採用 3 要素:

• palette: midnight space #000216 + sun amber emission #ff7847 + telescope brass #c9a445 + cool cyan label #6dd5d8 + star pearl #f0e6c4 + 惑星別レインボー (水銀 silver / 金星 yellow / 地球 blue / 火星 rust / 木星 cream / 土星 tan + ring / 天王星 pale teal / 海王星 deep blue)
• motif: 天文台 / HUD (twinkle star field 6s loop + pulsing LIVE dot + planet chip カラフルグリッド + 軌道線 cyan)
• typography: Space Grotesk 700 + JetBrains Mono labels (telemetry feel)

arcana-flip (黒 + plum 中世大聖堂) と surface 黒は近いが、 palette (warm-cool 混在のレインボー) + motif (天文台 vs 大聖堂) で完全別軸。 type-forge と同じ Three.js を使うが、 題材 (3D テキスト vs 太陽系) + visual 完全別。

技術スタック

Three.js シーン構築

const renderer = new THREE.WebGLRenderer({ antialias: true })
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, w/h, 0.1, 1000)
camera.position.set(0, 36, 90)
const controls = new OrbitControls(camera, renderer.domElement)

ACES Filmic トーンマッピング + sRGB 出力、 ピクセル比 min(devicePixelRatio, 2) で 描画品質 + パフォーマンスのバランス。

太陽 + 8 惑星 + 月

const sunMesh = new THREE.Mesh(new THREE.SphereGeometry(5, 48, 32),
 new THREE.MeshBasicMaterial({ color: 0xff7847 }))
const sunLight = new THREE.PointLight(0xffd6a8, 3.0)
// 各惑星: Group (公転軸) → Mesh (自転 + 位置 = visualOrbit)
// 地球の月: mesh の子に moonGroup を追加 → 自動的に地球に追従

スケール: 実比だと太陽 = 半径 109 Earth、 海王星 = 30 AU、 シーンに入りきらない。 log-scale で人為的に圧縮 (太陽 5 / 水星 0.4 / 木星 3.2 / 海王星 1.55、 軌道は 9 / 13 / 18 / 24 / 36 / 50 / 64 / 78)。 リアル比は情報パネルに別途表示する形で 「観察しやすい誇張 + データはリアル」 を両立。

軌道線

for (let i = 0; i <= 128; i++) {
 const t = (i / 128) * Math.PI * 2
 positions[i*3] = Math.cos(t) * orbitRadius
 positions[i*3+2] = Math.sin(t) * orbitRadius
}
const orbitLine = new THREE.Line(bufferGeo, new LineBasicMaterial({ color: 0x6680b8 }))

円軌道近似 (v2 で楕円 = Kepler 法則対応予定)。

時間スピード

const ONE_X_DAYS_PER_SEC = 1  // 1× = 1 秒で 1 日進む (体感優先)
const daysAdvanced = dt * ONE_X_DAYS_PER_SEC * timeSpeed
cumulativeDays += daysAdvanced

// 公転: group.rotation.y = (cumulativeDays / orbitalPeriodDays) * 2π
// 自転: mesh.rotation.y = (cumulativeDays / |rotationPeriodDays|) * 2π
//  逆方向自転 (金星 / 天王星) は符号で反転

「1× で 1 秒に 1 日」 ベースなので 100,000× で 「1 秒に 274 年」、 海王星の 165 年公転を 0.6 秒で 1 周見られる。

ピック (raycast)

const raycaster = new THREE.Raycaster()
const targets = [sunMesh, ...planetMeshes]
canvas.addEventListener("click", (e) => {
 pointer.x = (e.clientX / w) * 2 - 1
 pointer.y = -(e.clientY / h) * 2 + 1
 raycaster.setFromCamera(pointer, camera)
 const hits = raycaster.intersectObjects(targets)
 if (hits.length > 0) onPick(hits[0].object.userData.id)
})

シーン内の惑星 mesh を直接クリックして情報パネルに送る。 ボタンからの focus も同じ callback で扱う。

やっていない / これからの IMPROVE

• 主要衛星 (木星 ガリレオ衛星 4 + 土星 タイタン + 火星 フォボス / ダイモス 等)
• 軸傾き対応 (天王星 97° 横倒し / 火星 25° / 地球 23.4°)
• Kepler 楕円軌道 (現状は完全円軌道近似)
• 小惑星帯 + カイパーベルト + 彗星 (ハレー彗星等)
• リアル時刻同期 (今日の太陽系配置を JPL Horizons API から取得して表示)
• 写真テクスチャ (NASA / JPL の CC0 写真でリアル化)
• 教科書連動の解説モード (中学理科 / 高校地学カリキュラム別ガイド)

次の SHIP は何 thesis に振るか

Thesis Audit:

astro-cast — データ可視化 (2本目)
arcana-flip — 占い (2本目)
gift-cap — 計算ツール (3本目)
pile-park — シミュレーター
tone-quest — インタラクティブ学習

直近 5本で 4 thesis (占い 1 + 計算 1 + シミュ 1 + 学習 1 + データ可視化 1)。 ジェネレーター が抜けている。 candidate:

• ジェネレーター 2本目 (配色パレット / SVG モノグラム / AI 短歌)
• 計算ツール 4本目 (副業税金 / 育休給付金 / 退職金 / マネー計算機シリーズ続行)
• インタラクティブ学習 2本目 (国旗当て / 暗算)
• シミュレーター 2本目 (面接シミュ / 飲み会幹事)
• server-side AI 系をユーザーに提案 (charter 残り 1 枠)

PV ベースなら 配色パレットジェネレーター / 副業税金。 wow ベースなら更に server-side AI / ハンドポーズ系。