開發團隊替 LIDROP 做的線上 3D 配置器，客人在畫面上換什麼，底下那台 3D 整車就立刻換什麼。H6 這台車可換 15 個部位、15 種車架顏色，另有 Pro、Ultra 兩個等級和四種風格。
開發團隊把配置器拆成四層：模型的切法、規則的攔截、資料的來源、配置的帶走方式。最費工的是第一層的折疊動畫與頭管零件，效能則貫穿四層。下面逐層講做法，以及這樣做的理由。
第一層：模型的切法
畫面底層常駐一整台 3D 車，上面疊一層透明的選配介面。主車檔只含車架和空的掛點，每個可換的部位各是一支獨立模型，共用同一個座標，直接疊成整車。換款式時不載新檔，只依零件名稱（業界叫節點名）的前綴，把該顯示的顯示、該隱藏的隱藏。
零件名稱是模型和程式之間的合約
零件能跟著車架折疊，靠的是名稱規則：程式每一幀都依零件名稱，把零件綁到主車骨架上。名稱因此就是模型和程式之間的合約。建模師交付新模型時，上架前要先拿零件名稱比對綁定規則，對得上才放進去。
第二款車共用同一套綁定計算，做法是先把這款車的零件名稱還原成 H6 的規範名稱。
折疊動畫：裝備不同，折疊前後的高度就不同
折疊動畫最難的地方，是沒有固定的終點。裝備與配線一換，折疊前後的高度和動畫的停點都跟著變。H6 的主車模型裡有四段折疊動畫：四款頭管分成兩組，每組再分裝與不裝加固腳架。
| 換的裝備 | 跟著改變的事 |
|---|---|
| 輪徑與輪胎 | 305 輪折疊高 635 mm，349 輪折疊高 665 mm，展開的把手高度差 28 mm。地面依輪胎最低點重新貼齊。 |
| 頭管款式 | 四款分兩組，各播一段折疊動畫。9° 與 15° 的把手離地高度差 50 mm。 |
| 方向輪 | 可升降的款式較高，80 幀的折疊動畫播到第 55 幀就要停，再折車身會壓進輪子。 |
| 加固腳架 | 折疊後才放下。裝上時，主車與鏈條都改播另一段折疊動畫。 |
| 騎士包 | 掛在座墊下方，折疊時座墊的下降幅度有上限，否則會壓進包裡。 |
所以折疊的終點由當下的裝備決定，不能在程式裡寫成固定值。已經折好時換方向輪，車身會在 0.45 秒內平滑補到新的終點，主車與鏈條走同一段程式，不會斷開。座墊在折疊時自動往下收，展開後回到客人原本設定的高度。
鏈條有自己的骨架與折疊動畫，照該款車架的折疊路徑製作，兩款車不能共用。折疊後兩輪收到同一側，旋轉中心要重新對準整車的可見範圍，轉動時車身才留在畫面中央。
頭管：上面的零件互相牽制
折疊頭管是整台車牽連最多的部位。手握、剎把、變速前撥，以及選配的控制器、儀表、前燈與頭管包，都裝在頭管上。四款頭管的高度與把型不同，其中兩款就差 6.9 cm，換一款頭管，上面的零件全部要換位置。
- 客人換一款頭管共四款
- 程式依款式決定三項對位點、線與折疊組
- 手握、剎把、前撥與選配前件整組搬到新的對位點同一個對位點帶著全部零件
- 煞車線、變速線改顯示另一條線每款頭管都有預先擺好的線
- 主車折疊改播另一組折疊動畫四款頭管分成兩組
開發團隊以一款頭管為基準，其餘三款各放一個對位點，裝在頭管上的零件都相對這個點計算位置。同一個對位點帶著好幾件零件，數學上無法只挪其中一件；要單獨微調，原則上回到模型修改，不在程式裡疊補丁。
線是例外。煞車線與變速線的彎曲路徑隨頭管而變，沒辦法整條搬過去，所以每款頭管都有預先擺好位置的線：煞車線分線剎與油壓，四款共 8 條；變速線四款各 1 條，電子變速沒有變速線。程式只依頭管、煞車與變速的選擇，顯示對應的那一條。驗收時逐頂點量線與剎把的距離。
鏈條先載好，切車款重新載入整頁
鏈條是唯一換一次就整顆重新載入的部位，換齒數就等於換一支模型。所以進場就預先載好同車款的全部鏈條，之後只切換、不卸載。
切車款則是重新載入整頁，把記憶體真正釋放。3D 的改動以真機驗證為準，因為自動化測試環境算繪 3D 並不穩定。
第二層：規則的攔截
零件不是都能同時裝上。LIDROP 裝不上的組合，由一張規則表攔下：客人點下去，畫面先說明原因，確認後自動切成可行的組合，例如 E-Bike 只能裝在 Pro。規則放在前端而不是資料庫，因為資料庫的條件只能寫成「其餘分類選了什麼」，表達不了「依尺寸對應」。
規則裝和拆兩個方向都要測
「A 需要 B」是最常見的規則，選了 A 就得有 B。這類規則要判斷「這次點的是哪一件」，才分得出客人是在裝還是在拆。型別檢查看不出這種邏輯對不對，只有實際點過才知道，所以裝和拆兩個方向都要測。
第三層：資料的來源
選項的名稱、規格、重量、縮圖都是資料。LIDROP 的規格最早由 Excel 整理，現在以後端資料庫為準，另放一份靜態備援。後台只能改名稱、縮圖、重量和規格，部位數量由模型決定，要多一個部位得先有新模型。
同一份程式碼產出國際站與中國站，介面有繁中、簡中、英、德、日、韓六種語言。選項名稱的翻譯只認後端資料庫的六語欄位，後台有即時警告與稽核腳本，缺翻譯不用等客人看見才發現。
前端不寫死規格，抽不到就顯示「—」
前端不寫死規格常數，名稱、重量、速別、齒數都從資料來。抽不到速別或齒數時，配置卡顯示「—」，不拿預設值頂替。配置卡和規格 PDF 會被客人帶走，空白比印錯好。
資料來源
- 後端資料庫規格以此為準，含六語欄位
- 靜態備援另放一份
前端
- 同一份程式碼介面有六種語言
站台與客人帶走的文件
- 國際站
- 中國站
- 配置卡
- 規格 PDF
抽不到時配置卡的速別、齒數顯示「—」，不拿預設值頂替。
尺寸框和官方數字要分開
畫面能標出車的尺寸。顯示的數字以官方公布值為準，畫出的外框則用模型幾何再手動微調，兩者分開。
使用者自己填的資料
適配分析依身高、腿長、臂長驅動 3D 騎士，標出關節角度與前後輪重量分配。
肢長不好量，所以有「用照片填入肢長」：姿態辨識模型跑在使用者自己的裝置上，模型檔由開發團隊自己放，照片不離開裝置。身高填錯，數學上擋不住，所以結果一律可改，並明說是估計。文案守一條原則：只揭露，不推薦，不打分、不標紅黃綠、不寫「建議調整」。
第四層：配置的帶走方式
配置卡有三視角整車圖、逐件規格與重量、QR 碼和規格 PDF。用另一支手機掃 QR 碼，會開出同一台車。
連結要短，QR 碼才拍得動
整套配置要塞進網址。最直覺的做法是轉成 JSON 再用 base64 編碼，網址會超過一千字元，QR 碼密到手機拍不動。去掉可以推導的前綴，只留緊湊字串，約 120 字元。
- JSON 加 base64超過 1,000 字元QR 碼密到手機拍不動
- 去掉可推導的前綴
- 緊湊字串約 120 字元
貫穿四層的前提：效能
3D 配置器的效能排在功能之前。整車由十幾個部位的模型疊成，折疊與換件時零件每一幀都要依骨架重算位置，而且手機也要開得起來。畫面一卡，選配流程就斷了。LIDROP 實際用上的做法如下：
- 首屏下載量分輪盤點。建置後讀取所有資源請求，依副檔名分類，每一輪只動執行期用不到的位元組。第一輪從約 57 MB 降到約 43 MB，第二輪降到約 37 MB；後續版本再由 36.5 MB 降到 32.5 MB，其中 3D 模型檔約占 80%。
- 壓縮格式看下載加解碼的總時間。檔案最小的格式不一定最快，也不一定最省記憶體，每種編碼都從原始檔重壓再比較，數字放在3D 模型優化前後對照。
- 純色材質不用高解析度貼圖。解碼後逐張檢查，整張純色的貼圖縮成 4 × 4，畫面不變。
- 車架顏色的貼圖選到才載入，開場不全部預載。
- 車靜止時停止算繪，轉動、折疊、換色時才喚醒。
- 手機維持 1K 貼圖；桌機鏡頭拉近才換成 4K。
量法與預算的完整流程，另見Web 3D 效能工程。
付款前先看見成品的另一個例子，見訂製招牌的實景預覽。
不適合的情況
以下是開發團隊的判斷。這幾種情況，不做配置器比較合理：
- 只想讓網站好看。配置器的工夫幾乎都在四層的接縫，視覺只占一小部分。
- 產品單純，一張照片就講得完。沒有可換的零件，3D 只是多一道載入。
- 選項少到型錄就夠。幾個顏色、幾個尺寸，一頁型錄比配置器清楚，也不用維護模型與規則。
- 沒有可信的規格資料來源。資料還散在各人的 Excel、版本不一致時，先整理資料。配置器會把錯誤直接印在客人帶走的配置卡上。
評估前先備好的三樣
想評估做 3D 配置器，先備好這三樣：
- 完整的選項清單，註明哪些零件互相排斥。
- 每個選項的規格資料，以及誰負責維護。
- 3D 模型的來源：已有建模檔，或需要從頭建模。
備好之後到聯絡頁留下產品與現有資料的簡述，開發團隊會先看選項與資料，判斷四層各缺什麼。要比較廠商時，可請廠商就這四層逐層說明做法，另一篇軟體外包廠商的評估表有更多判斷方式。
