MythicMobs 粒子特效 3D 繪圖器

一個基於 Three.js 的瀏覽器工具，用於在 3D 空間中繪製粒子點並自動產生適用於 MythicMobs 的技能程式碼片段。支援高度繪圖、平面旋轉、連續筆刷、橡皮擦與專案檔案保存/載入。

特色

• 3D 視覺化: 坐標網格與自訂顏色的 X/Y/Z 座標軸、方向指示器（上、前、左、右）。
• 多種操作模式: 相機、點、筆刷（拖曳連續繪點）、橡皮擦（點或拖曳擦除）。
• 高度繪圖與可視化網格: 可設定 Y 高度並顯示對應的紅色參考網格。
• 平面旋轉: 對繪圖平面套用 X/Y/Z 旋轉角，與高度參考網格同步。
• 粒子設定: flame、heart、reddust、witch、note；reddust 支援顏色。
• 專案管理: 新專案、儲存 .mythic3d、載入 .mythic3d/.json，追蹤未儲存變更。
• 程式碼輸出: 一鍵生成 MythicMobs Skills 片段，包含 sideOffset/forwardOffset/y 與顏色（reddust）。

環境需求

• 現代瀏覽器（建議 Chrome/Edge 最新版）。
• 不需建置或安裝套件，已透過 CDN 使用 Three.js 與 Import Map。

快速開始

1. 直接開啟 index.html 即可使用。
2. 若瀏覽器安全性限制導致無法載入模組，請使用任一簡易靜態伺服器在本機啟動：
   • Python: python -m http.server 8080
   • Node (serve): npx serve . 然後以 http://localhost:8080 方式開啟。

介面與操作

• 畫面中央為 3D 畫布，可使用滑鼠操作相機：
  • 左鍵拖曳：旋轉視角
  • 滾輪：縮放
  • 右鍵拖曳：平移
• 左上固定面板為控制區，包含以下區塊：
  • 專案管理：新專案、儲存、載入、專案名稱、目前專案顯示（帶 * 表未儲存）。
  • 操作模式：相機、點、筆刷、橡皮擦。
  • 粒子設定：粒子類型與（針對 reddust）顏色選擇器。
  • 繪圖設定：繪畫高度（Y）。
  • 平面旋轉：X/Y/Z 三軸角度（度）。
  • 操作：生成程式碼、清除畫布、上一步。
  • 程式碼輸出：只讀文字區，可複製貼上到 MythicMobs 設定。

建議工作流程

1. 在「專案管理」輸入或確認專案名稱（可選）。
2. 選擇「操作模式」：
   • 相機：調整視角；不會繪圖。
   • 點：在畫布點擊一次即落下一個粒子點。
   • 筆刷：按住拖曳連續繪點（點與點以線段輔助連接）。
   • 橡皮擦：點或拖曳擦除半徑附近的點。
3. 在「粒子設定」選粒子類型；若為 reddust 可選顏色。
4. 透過「繪圖設定」調整高度；高度 > 0.05 時會顯示紅色參考網格。
5. 於「平面旋轉」調整 X/Y/Z 角度，以在傾斜的平面上作畫。
6. 完成後點「生成程式碼」並從輸出區複製。

重要對應關係（座標 → MythicMobs 參數）

• sideOffset = -X（注意為負號）
• y = Y
• forwardOffset = Z
• color 僅在 particle=reddust 時輸出

範例：產生的技能片段

MyDrawingSkill:
  Skills:
    - effect:particles{particle=reddust;amount=1;speed=0;y=0.500;forwardOffset=1.000;sideOffset=-0.250;color=#ff0000} @self
    - effect:particles{particle=flame;amount=1;speed=0;y=0.500;forwardOffset=1.250;sideOffset=-0.250} @self

當畫布為空時，按下「生成程式碼」會提示先繪製點。

專案管理

• 新專案：清空畫布與設定，名稱重設為「未命名專案」。
• 儲存專案：下載一個 .mythic3d（JSON）檔案，其中包含所有點與當前設定。
• 載入專案：載入 .mythic3d/.json 檔案並恢復畫布與設定。
• 任何變更會以 目前專案: <名稱> * 顯示 *，表示尚未儲存。

.mythic3d 檔案格式（JSON）

{
  "name": "我的專案",
  "createdAt": "2025-01-01T12:00:00.000Z",
  "version": "1.0",
  "particles": [
    { "x": 0.0, "y": 0.5, "z": 1.0, "particleType": "reddust", "color": "#ff0000" }
  ],
  "settings": {
    "drawingHeight": 0.5,
    "planeRotation": { "x": 0, "y": 0, "z": 0 },
    "particleType": "reddust",
    "particleColor": "#ff0000"
  }
}

常見問題

• 直接開 index.html 空白或模組錯誤？ 使用本機靜態伺服器啟動（見「快速開始」）。
• 為什麼顏色選不到？ 只有 reddust 支援 color；其他粒子不輸出顏色。
• 高度參考網格沒出現？ 需高度 > 0.05 才顯示，且與平面旋轉同步。
• 上一步只撤銷最後一個點？ 是，該操作會同時移除該點的連接線段（若有）。

技術說明（簡述）

• 使用 three（CDN）與 OrbitControls 實作 3D 場景與相機操作。
• 以不可見的可交互平面搭配 Raycaster 取得滑鼠點擊的 3D 位置。
• 透過動態高度平面與參考網格顯示高度並支援旋轉。
• 專案以 JSON（.mythic3d）保存/載入，保持設定與點資料一致。

版權與授權

未標明授權，預設保留所有權利；如需指定授權條款，請在此補充。