CrystalScope｜晶體結構觀察室
LWCJacky 2026/10/16 作品晶體結構VueThree.js
# 介紹
- 材料科學課本上的晶胞圖永遠是平面的，很難想像原子在三維空間裡怎麼排列
- 七大晶系、14 種布拉菲晶格、晶向 [uvw] 與晶面 (hkl)，光靠文字和投影圖很難建立直覺
- 想讓學生自己動手改原子、改晶胞參數，卻找不到不用安裝、開瀏覽器就能用的工具
# 為了解決上述問題我開發了 CrystalScope
# CrystalScope（晶體結構觀察室）是一個開源的互動式晶體結構教學工具
- 純前端，開啟網頁即可使用，不需安裝也不需登入
- 以 3D 模型、晶胞動畫與參數控制，探索七大晶系與原子排列
- 繁中／英／日三語介面，專業名詞一律附上英文原文
# 主要功能
# 教學內容
- 七大晶系與 14 種布拉菲晶格的示意晶胞
- 10 個教學結構範例：體心立方金屬（α-Fe）、面心立方金屬（Cu）、六方最密堆積（Mg）、α-鈾、氯化銫、氯化鈉、鑽石、閃鋅礦、鈦酸鋇（立方相）、石墨
- 晶格點／基元／結構三視圖，直觀呈現「結構 = 晶格點 + 基元」
- 硬球模型與晶胞裁切、六方柱四軸表示與拼裝動畫
- 自動演示與導覽（Guided tour）
- 尺度之旅（Scale journey）：從 4 cm 的日常物件連續放大到晶胞
# 觀察工具
- 視角方塊：面／稜／角對位、90° 轉向
- 晶向 [uvw] 觀察，可沿晶向觀看
- 晶面 (hkl) 觀察，可與展示區求截面
- 三層格線：主晶胞／重複格線／超晶胞外框
- 原子與連線透明度調整、統計面板、情境知識提示
- PNG 匯出
# 兩種工作模式
- 教學模式：正式範例唯讀，適合課堂展示與自學
- 設計模式：由範例深複製出草稿後自由編輯
- 原子新增／刪除／換元素／修改座標
- 晶胞參數與幾何約束
- 鄰近連線規則
- 交易式復原（Undo／Redo）與本機自動保存
- 草稿檔（.csdraft，JSON 格式，可選密碼加密）匯入匯出
# 作業模式
- 老師以簽章發布題目
- 學生加密繳交
- 老師以私鑰批改
- 全程純前端，不經過任何伺服器
# 技術架構
| 目錄 | 責任 |
|---|---|
src/core/ | 幾何計算（純 TypeScript）：晶胞驗證、基底矩陣、分率 ⇄ 直角座標、週期複製、晶向 |
src/data/ | 科學資料：七大晶系典型晶胞與晶胞設定說明 |
src/render/ | Three.js 渲染層（按需重繪、實例化球體） |
src/stores/ | Pinia：結構與歷史紀錄、介面設定 |
src/components/ | Vue 介面 |
src/i18n/ | 多語訊息表（zh-TW／en／ja）、專業名詞表 |
- 前端框架：Vue 3 + Pinia + TypeScript
- 3D 渲染：Three.js
- 建置工具：Vite
- 部署：GitHub Actions 自動建置並發布到 GitHub Pages
- 幾何核心附有單元測試
# 限制
- 球體大小與顏色為示意比例，不代表真實原子半徑
- 晶胞邊線不代表化學鍵
- 自由編輯後的結構會標示為「自訂結構」，不宣稱仍屬原晶系
- 尚未完成：拖曳編輯、逐筆材料來源與新材料
# 開發
git clone https://github.com/LWCJacky/crystal-scope.git
cd crystal-scope
npm install
npm run dev # 開發伺服器
npm test # 幾何核心單元測試
npm run build # 型別檢查 + 靜態建置
# 連結
# 授權
- 程式碼與教學內容以 GNU General Public License v3.0 或任何更新版本（GPL-3.0-or-later） 授權
- 可自由使用、修改與散布，但衍生作品必須以相同授權開源並保留聲明
- 第三方資源：Three.js、Vue、Pinia 為 MIT；Nunito、Noto Sans TC、Noto Sans JP 字體為 SIL OFL 1.1
# 作者
- 作者：LWCJacky（著作權所有人）
- 共同作者（AI 協作模型）：GPT-6（OpenAI）、Claude Opus 5.5、Claude Fable 5.1（Anthropic），協助規劃、程式撰寫與審查
- 科學內容與最終決定由作者負責