🪐 #29 太陽系探索者：Three.js 3D 渲染 + 滑鼠拖旋轉 + 模擬速度滑桿 + 內外太陽系三視角切換
#29 真實名稱「太陽系探索者 🚀」— 阿凱用 **Three.js 3D 渲染**寫的太陽系互動模擬。拖曳滑鼠旋轉視角 + 滾輪縮放 + 點擊行星顯示資訊 + 模擬速度滑桿 + 顯示軌道 / 行星標籤開關 + 三種預設視角（總覽 / 內太陽系 / 外太陽系）。24KB 單檔部署 XOOPS VM。
五年級自然「太陽系」單元的痛
五年級自然有「太陽系」單元 — 但傳統教學：
- ❌ 課本平面圖 → 學生只看到 9 個圓圈不立體
- ❌ YouTube 影片 → 被動觀看，不能互動探索
- ❌ Google Sky / NASA Eyes → 英文介面 / 太複雜
- ❌ 3D 軟體 Stellarium → 要安裝、太專業
阿凱的 #29 太陽系探索者 反向：Three.js 純瀏覽器 3D + 中文介面 + 拖滑鼠就能轉。
#29 真實技術細節（Three.js 3D！）
真實標題：「太陽系探索者 🚀」
完整功能（從程式碼抽出）：
功能 A：3D 渲染（Three.js）
new THREE.Scene()場景PerspectiveCamera(75, ...)透視相機- 太陽 + 8 大行星 + 軌道渲染
功能 B：互動控制
- 拖曳滑鼠 → 旋轉視角
- 滾輪縮放 → 拉近 / 拉遠
- 點擊行星 → 右側資訊面板顯示行星資料
功能 C：模擬控制
- 模擬速度滑桿：調整行星公轉 / 自轉的速度
- 顯示軌道開關：可隱藏軌道線
- 顯示行星標籤開關：可隱藏行星名稱
功能 D：三種預設視角
- 🌌 總覽視角
- ☀️ 內太陽系（水星 / 金星 / 地球 / 火星）
- 🪐 外太陽系（木星 / 土星 / 天王星 / 海王星）
功能 E：「使用說明」內建教學
- 完整滑鼠操作 + 點擊行星 + 模擬速度 + 軌道 / 標籤 + 視角切換全方位教學
真實技術棧
- 純前端單檔 HTML（24,320 字元）
- Three.js（CDN 引入）
- requestAnimationFrame 流暢動畫
- 無後端、無 LLM
- 部署：
smes.tyc.edu.tw/smes_html/3d-space.html
為什麼這個值得寫獨立教學心得？
#29 是 swissknife / smes_html 系列中唯一用 Three.js 的工具 — 阿凱對技術棧的選擇有意識：
- 普通遊戲 → Canvas 2D（#28 瑪莉歐 / #31 抓抓樂）
- 3D 太空 → Three.js（這個 use case 沒辦法用 2D）
- 影像格式轉換 → Vanilla File API（隱藏作品 HEIC 轉 JPG）
- AI 出題 → Gemini API（#25 國語演說）
用對工具是工程師的修養。
教學情境
五年級自然「太陽系」單元 3 節課：
- 第 1 節：講解八大行星 + 用 #29 總覽視角看
- 第 2 節：分組探索 — 每組分配 1 顆行星，點擊查看資料 + 上台報告
- 第 3 節：模擬時間流逝 — 用速度滑桿展示「1 個月 = 地球公轉 1/12 圈」
- 回家作業：分享 #29 給家長 + 講 1 個行星給家長聽
資訊科技課示範：
- 跨年級素養課 — 看「單檔 HTML + Three.js 就能做 3D 模型」
家長親子科學：
- 假日跟孩子一起拖滑鼠探索宇宙
跟其他天文工具的差異
| 工具 | 優點 | 缺點 |
|---|---|---|
| 課本 | 完整知識 | 平面、無互動 |
| YouTube | 影音吸引 | 被動觀看 |
| Stellarium | 專業 | 要裝軟體 |
| NASA Eyes | 真實 | 英文介面 |
| #29 太陽系探索者 | 零安裝 + 中文 + 互動 + 學校網域 | ⭐ |
配對工具推薦
- #28 瑪莉歐平台跳躍 — 同款 Canvas 但 2D
- #30 遊戲集合 — 12 in 1 遊戲合集
- #81 國小資訊科技教學駕駛艙 — 五年級資訊課入口
適用對象
- 五年級自然 / 地球科學老師
- 五六年級資訊課（看 Three.js 案例）
- 天文社團指導老師
- 想做「3D 互動視覺化教學」的老師
- 自學家長
想試試？
第一次玩建議：先點「使用說明」看完 → 切「內太陽系」視角 → 拖滑鼠繞地球 → 點地球看資料 → 你會理解「3D 比 2D 強在哪」。