如何把 3D CAD 模型放到網站上：4 種方法比較

要把 3D CAD 模型放到網站上，請把組合件匯出為 STEP 檔，轉換成 glTF 或 GLB 格式的輕量化顯示模型，再用網頁檢視器在產品頁上呈現這個模型。您的 CAD 檔本身完全不需要公開：瀏覽器只會下載顯示模型。以 Tutamen 由 42 個零件組成的 ICM-21 冷卻液歧管為例，用它的 STEP 檔製作的顯示模型，下載大小為 2.0 MB。

STEP 是所有主流 CAD 系統都能匯出的中性 3D 檔案格式（ISO 10303）。glTF 是 Khronos Group 制定的網頁 3D 開放格式，GLB 則是單一檔案形式的 glTF。從 STEP 檔到網頁模型的四種方法，主要差別在於買家能做什麼、您要交出什麼，以及由誰負責維持運作。

為什麼網站無法直接顯示 STEP 檔？

STEP 檔以精確的數學曲面描述產品，而瀏覽器只能繪製平面三角形。每個面都必須先鋪滿小三角形（也就是一般所說「網格」裡的多邊形），這個步驟稱為曲面細分（tessellation）。三角形越多，曲線越平滑，檔案也越大，所以好的轉檔工具會在全螢幕下曲線已經看起來平滑時就停止。

轉換方式也決定了頁面能做什麼。好的顯示模型會讓每個零件保持獨立、有名稱，也指定了材質，組合件才能展開成爆炸圖，每個零件也都能點選。重複的零件只儲存一次：ICM-21 的檔案含 214,168 個三角形，螢幕上則繪製 654,948 個。顯示模型不含特徵樹、草圖或參數，所以重量與體積等數字，要先從精確的 CAD 量測；兩者有出入時，好的頁面會註明以規格書為準。

以下是這套流程為 Proofscene 四個線上模型產出的結果，數據量測自各頁面實際載入的檔案：

表中的下載大小，就是訪客要等待的部分；周圍的頁面與檢視器大約再增加半 MB。*STRAVIK、HALVORN 與 ARTIXO 是 Proofscene 自行建模的虛構品牌，用來展示其他產業；ICM-21 則是 Tutamen 的真實產品，以它的 STEP 檔製作。

把 CAD 模型放到網站上的四種方法是什麼？

四種方法分別是：嵌入免費線上檢視器、使用代管的 3D 平台或配置器、以 Google 的 model-viewer 等開放網頁元件自行建置頁面，以及根據 CAD 為您量身打造的互動式產品頁。以下依工業產品最關鍵的幾個問題，比較這四種方法：

哪種方法適合您的產品？

免費檢視器適合讓一位客戶快速看一個零件。這是最快的方法，交出去的也最多，因為免費的 CAD 檢視器直接使用您的 STEP 檔本身。

代管平台適合靠外觀與選配銷售的產品，買家要挑選顏色或尺寸。這類買家會在配置器中做選擇。

用 model-viewer 自己做（Google 以 three.js 函式庫打造的免費網頁元件），適合有時間的網站團隊，以及只需要旋轉展示的簡單零件。它在旋轉、標籤與 AR 方面表現很好。代價是每項產品都要轉檔、簡化、打光與測試，每次修改都得重來一遍；剖面、X 光模式或可點選的零件清單，都得自己寫程式。

量身打造的互動式產品頁，適合價值藏在外殼裡的工業產品（幫浦、閥門、歧管、機器人關節），以及會檢查每個數字的買家。Proofscene 會把它建置到您自己的網站中，可以是一個 iframe 標籤，也可以是代管在 yourbrand.proofscene.com 的頁面；Tutamen 的 ICM-21 在 STEP 檔送達當天就上線了。

如果您的產品屬於最後這一類，傳送 STEP 檔與規格書，就能把您的產品做成 3D。量身打造的產品頁包含在 Proofscene Business 與 Enterprise 方案中；開始製作前，我們的團隊會告訴您將製作哪些內容、何時上線。

買家應該能用模型做什麼？

工業產品的買家想看到內部、核對數字，所以模型不該只能旋轉，還要讓他們拆開產品、剖開它、看穿它，並讀取每個零件的資料。以下每一項，都能在現在就能開啟的線上模型中實際操作：

• 爆炸圖。HALVORN BV25 球閥會依組裝順序拆解成 14 個零件。
• 剖面與流動。把 STRAVIK SX 50-160 幫浦剖成兩半，並以 15 至 40 m³/h 之間的任意流量運轉。
• X 光透視。隔著 ARTIXO RA90 機器人關節的外殼，看見馬達、50:1 諧波減速機與輸出軸承。
• 零件資料與量測。點選 Tutamen ICM-21 的任何零件，即可查看名稱、材質與數量；也能在真實邊緣之間量測，並依規格書的流量分配讓冷卻液流動。
• 分享。每個視角都有連結與 QR Code，還有簡短的導覽，給不會自己探索的訪客。

同一個模型也能生成產品上市影片：請見 3D 產品動畫，或觀看在瀏覽器中拆解互動式 3D 產品頁的 35 秒影片。

如何讓 3D 模型在手機上也快速載入？

把模型控制在幾 MB 以內，等訪客捲動到它時才載入，並確保沒有模型時頁面也一樣好讀。先載入的模型，會拖慢買家真正想看的文字與圖片。

• 壓縮檔案。glTF 能以更少的位元組儲存數值，並透過 Draco 或 meshopt 擴充功能壓縮幾何資料，伺服器也應該壓縮後再傳送。Proofscene 的模型以 16 位元數值儲存表面方向，並以 gzip 壓縮傳輸：ICM-21 的 3.6 MB GLB 檔，送達時為 2.0 MB。
• 把三角形用在買家會看的細節上。螺紋細節、細小圓角，以及沒人會打開的零件內部，只會拖慢手機，沒有任何幫助。
• 先顯示靜態圖片。等模型捲動進入畫面或訪客輕觸時，才載入 3D；model-viewer 用封面圖與延遲載入做到這一點。
• 不要卡住頁面捲動。Proofscene 的嵌入內容會隨頁面捲動，只有按住 Ctrl 或雙指縮放時才會縮放；在手機上，面板會收合成底部抽屜，讓產品始終清楚可見。
• 把重要資訊寫在文字裡。搜尋引擎與 AI 助理讀的是頁面，不是模型，所以要把產品說明、零件名稱與規格寫進 HTML。Proofscene 的公開展示頁還會加上 3D 模型的結構化資料，無法執行 3D 的瀏覽器也照樣能取得這些文字。

模型放上公開頁面後，您的 CAD 安全嗎？

安全，因為顯示模型不是您的 CAD：它包含的是螢幕精度的三角形，沒有特徵樹、草圖、參數或精確曲面，也沒有您省略的任何內部細節。發布前，先保護好重要的部分：

• 簡化或移除任何涉及商業機密的部分，例如內部流道或密封件斷面。
• 絕不要把 STEP 檔上傳到訪客可以下載原始檔的檢視器。
• 上線前，先在有密碼保護的連結上審閱，並與經手 CAD 的對象簽署保密協議（NDA）。Proofscene 就是這樣作業的，您的 CAD 與內容，所有權始終歸您。

延伸閱讀

閱讀 Tutamen 的 ICM-21 如何從 STEP 檔變成上線的產品頁，到互動式 3D 產品展示頁面試用全部四個模型，或觀看 3D 產品檢視器放上您網站的 36 秒影片。