「太陽系探索者 🚀」是阿凱老師為五年級自然「太陽系」單元設計的 Three.js 3D 互動模擬(real URL:smes.tyc.edu.tw/smes_html/3d-space.html),把抽象太陽系搬進瀏覽器 360° 探索。
🎯 核心特色
- 🌌 Three.js 真實 3D 渲染 —
PerspectiveCamera(75, ...)+ 太陽 + 8 大行星 + 軌道完整呈現 - 🖱️ 拖曳滑鼠旋轉 + 滾輪縮放 — 學生自由探索任何視角
- 🪐 點擊行星顯示資料 — 右側資訊面板秀行星詳細資訊
- ⏩ 模擬速度滑桿 — 可調公轉 / 自轉速度,看「1 個月 = 地球公轉 1/12 圈」
- 🔭 三種預設視角切換 — 🌌 總覽 / ☀️ 內太陽系(水金地火)/ 🪐 外太陽系(木土天海)
- 🎚️ 顯示開關 — 軌道線 / 行星標籤可個別隱藏
- 📖 內建「使用說明」教學 — 完整滑鼠操作 + 模擬速度 + 視角切換全方位教學
💡 設計理念
五年級自然太陽系單元的痛 — 課本平面圖太抽象、YouTube 被動觀看、Google Sky/NASA Eyes 英文太複雜、Stellarium 要安裝。阿凱反向設計成零安裝 + 中文 + Three.js 純瀏覽器 3D + 掛學校網域。是 swissknife / smes_html 系列中唯一用 Three.js 的工具 — 阿凱對技術棧的選擇有意識:普通遊戲用 Canvas 2D(#28 瑪莉歐 / #31 抓抓樂)、3D 太空非 Three.js 不可、簡單 3D 用純 CSS(#60 3D 畫廊)。用對工具是工程師的修養。
🎒 適合情境
適合五年級自然 / 地球科學老師、五六年級資訊課(看 Three.js 案例)、天文社團指導老師、想做「3D 互動視覺化教學」的老師、自學家長。最常見用法:五年級自然 3 節課(總覽看 → 分組探索每組 1 顆行星上台報告 → 模擬速度展示時間流逝)、資訊課示範「單檔 HTML + Three.js 就能做 3D」、家長假日跟孩子拖滑鼠探索宇宙。免費、純前端、掛校網。