需求
在多數心智圖工具中，展開一個分支不是讓畫面變得雜亂，就是跳到新的頁面——結果就忘了自己是從哪裡來的。
構想
完全保留傳統的想法樹狀結構——只改變在其中移動的方式。
我打造了什麼
- 一種導覽方式：每則筆記的子筆記會出現在它周圍的小球面上，而上一層仍留在螢幕上。
- 以舒適為優先挑選的操作：滾輪縮放、拖曳旋轉、Alt + 拖曳移動視角，手機上則有更大的觸控區域。
- 先前的兩個版本——一個平面圖，以及每次點擊都會切換場景的 3D 版本——因為容易讓人失去方向感而被取代。
- 它也會透過一個小型公開資料來源，自動把本網站的專案呈現在地圖上。
成果
- 3試過的導覽設計，保留 1 種
- 22次試圖繞過編輯保護——全部被擋下
- 2整個專案的相依套件數
- 2026 年 9 月 5 日上線日期
公開的心智圖就是這套導覽方式的實際示範。任何修改都必須先通過自動化測試，才會更新到正式環境。
畫面一覽
我學到了什麼
三個版本之間，資料幾乎沒有改變——改變的只有在其中移動的方式。把兩者分開，讓我能把畫面呈現重做兩次，卻完全不必動到資料。
技術細節 技術堆疊、架構與決策——給技術背景的讀者
技術堆疊
- Three.js
- 原生 JavaScript
- Node.js + Express
- SQLite (node:sqlite)
- Cloudflare Tunnel + Access
- systemd
- GitHub Actions
運作方式
- 單一遞迴資料表 notes(id, parent_id, x, y, title, content)，其中 x 和 y 是父筆記球面上的經度與緯度（以度為單位）。
- Three.js 是瀏覽器載入的唯一函式庫；約 760 行自行撰寫的 JavaScript 負責版面配置、導覽與編輯。攝影機直接控制球面座標，而不是使用 OrbitControls。
- 每個子球體的半徑為父球體的 0.46 倍；導覽過程中從不重建場景圖（scene graph）。
- 讀取公開；寫入則在上游由 Cloudflare Access 把關，服務本身只在通道後方的 127.0.0.1 上監聽。22 次繞過嘗試（大小寫變換、雙斜線、「..」路徑片段、URL 編碼、其他 HTTP 方法）全都被導向登入頁面。
- 一次以攻擊者角度進行的審查發現了兩個真正的缺陷，並在當天修正：掛載在所有路由上的 JSON 解析器，讓匿名訪客能寫入系統日誌；以及只要一次網路載入失敗，就會讓導覽卡住。
- 透過 GitHub Actions 持續部署；只有測試套件全部通過，正式環境才會更新。
事件與修正
- 在手機上，點擊小小的筆記標記（6 到 10 px）常常點不中：加入 22 px 的觸控容錯範圍，並預先載入下一層之後，模擬點擊的成功次數從 12/17 提升到 17/17。
- 光暈效果（bloom）是手機上的效能瓶頸：在手機上關閉它之後，跨越多個層級的飛行動畫從每秒 20 個影格提升到 37 個影格。
仍待補強
- 編輯權限僅限本人——刻意如此設計
- 觸控手勢仍在調整中