3D Object Editor

這是一套提供給品牌客戶使用的 3D 檔案編輯工具。客戶可以透過操作介面調整既有 glTF 模型中物件的位置、尺寸與旋轉角度，使其符合虛擬試戴所需的定位參數。工具也支援修改模型的材質參數，以呈現更符合產品需求的 AR 渲染效果。

我負責這個專案從 Prototype、技術驗證、正式產品開發，到上線後的功能維護與版本迭代。

Prototype 階段

最初的版本以 .obj 與 .mtl 檔案為主要輸入格式，使用 React 建立操作介面、Three.js 負責 3D 畫面渲染與物件操作，並透過 useContext 管理編輯狀態。

這個版本讓使用者能直接在頁面中即時調整模型的材質參數，作為初期技術驗證，供主管與相關團隊確認產品方向與操作流程。

此階段的主要挑戰是理解 Three.js 與 WebGL 中的材質及光照參數，並調整場景、相機與燈光設定，使網頁中的預覽結果能正確呈現模型效果。

完成初期驗證後，專案將 Three.js 的部分渲染功能替換為公司內部的渲染引擎，使編輯器中的預覽結果能與實際 AR 產品保持一致。

由於內部引擎與 Three.js 提供的操作介面不同，我需要將既有的物件載入、材質修改與場景控制流程重新整合。

為了維持接近 Three.js 的操作體驗，我也與核心引擎團隊討論所需的底層 API，並在前端實作物件旋轉、軸向控制及慣性減速等互動功能。

品牌客戶提供的 3D 模型通常無法直接套用於 AR 試戴，需要先調整模型的位置、尺寸與旋轉角度，才能符合產品所需的座標與定位方式。

因此，我使用 Three.js 建立一套視覺化定位介面，讓使用者可以直接操作模型，並即時預覽調整結果。除了編輯功能外，我也驗證模型匯入與輸出的正確性，確保編輯後的定位參數能被後續 AR 流程正確讀取。

隨著專案需求增加，模型格式由 .obj 與 .mtl 逐步轉向 glTF。相較於早期格式，glTF 包含場景階層、材質、Buffer、Accessor 及自訂欄位等更完整的資料結構。

我透過 Three.js 解析輸入檔案，並同時驗證模型是否符合 glTF 規格與內部渲染引擎的支援條件，確保輸出的模型能在後續 AR 流程中正常使用。

由於直接修改模型資料可能造成外部 .bin 檔案產生非預期變動，我另外實作了一套 glTF 輸出流程，控制需要更新的節點與參數，避免影響不相關的模型資料。後續的定位工具與材質編輯工具也都以 glTF 作為主要支援格式。

為了讓使用者能自然地檢視 3D 模型，我實作了一套支援滑鼠拖曳與觸控操作的旋轉機制，並加入旋轉慣性與逐幀減速效果。

這項功能不只是改變模型的旋轉角度，也需要根據使用者拖曳的距離、方向與速度計算後續動量，在每一幀逐漸降低旋轉速度，使操作體驗保持流暢且可預期。

在 Three.js 版本中，相機與模型旋轉可以利用既有 API 實作；整合內部渲染引擎後，則需要與核心引擎團隊共同定義適合的控制 API，再由我完成前端的手勢偵測、速度計算與動畫流程。

將 glTF 模型結構轉換成內部渲染引擎可使用的資料格式時，需要處理場景節點、座標轉換、材質參數、Buffer 與自訂欄位之間的對應關係。

遇到格式或輸出問題時，我會查閱 glTF 規格與 Three.js 官方文件，並分析模型在解析、修改與重新輸出前後的資料差異。

由於這些功能涉及檔案讀取與輸出，每次修正後都需要重新測試既有模型案例，確認新版本不會改變原有模型的結構或渲染結果，以維持不同版本之間的一致性。

我負責這個專案從 Prototype 到正式上線期間的主要前端開發工作，也是 Three.js、模型編輯流程與 glTF 檔案處理功能的主要負責人。

除了完成材質編輯、模型定位、旋轉互動與檔案輸出功能外，我也實作了部分自動定位邏輯，協助系統根據模型資訊產生初步的位置與尺寸設定，減少完全依賴人工調整的步驟。

這套工具將原本需要透過外部 3D 編輯軟體完成的部分工作整合至公司內部流程，讓設計師與相關人員可以在同一個介面中完成模型檢查、定位與材質調整，並直接預覽模型在內部渲染引擎中的效果，降低不同工具之間反覆匯出、修改與驗證的成本。