--- title: "React three fiber 實作3D 產品展示筆記" description: "記錄使用 React Three Fiber 開發 3D 產品展示間的實作過程，涵蓋 GLTF/GLB 格式轉換、模型壓縮、進階特效及 iOS 手機記憶體限制的解決方案。" canonical_url: "https://blog.markkulab.net/post/react-three-fiber-3d-showroom-note" author: "Mark Ku" author_url: "https://blog.markkulab.net/author/mark-ku" site: "Mark Ku's Blog" date_published: "2023-10-27 01:01:35 +0300" category: "Frontend" tags: ["three.js", "react", "3d", "gltf", "glb", "nextjs"] language: "zh-TW" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "轉載或引用請註明作者並附上原文連結" --- # React three fiber 實作3D 產品展示筆記 ## 時空背景 競爭對手[maingear](https://maingear.com/maingear-mg-1-live-3d-configurator/ )推出 3D Configurator，因此我花了些時間研究了一下3D 技術。 ## 首先，要解決 3D 圖檔格式的問題 從產品設計師要了公司的機殼模型 3D 檔，STEP 拿到的是，因此就開始從網頁常用的格式開始學習起。 ## 說到 3D 產品展示，我們就必須要了解 GLB 和 GLTF 這兩個主流格式的差異 (From ChatGpt) GLB 和 GLTF 是兩種用於表示 3D 模型的格式，它們主要用於 3D 圖形和虛擬現實。這兩種格式都基於 GL Transmission Format，但它們之間還是存在一些差異： 檔案結構： GLB：這是二進制格式的檔案，所有的資料（包括紋理、網格等）都被儲存在單一的二進制檔案中。這使得檔案較小，載入速度更快。 GLTF：這是 JSON 格式的檔案，可選擇將紋理、網格等儲存在單獨的二進制檔案或是直接嵌入 JSON 中。相對於 GLB，GLTF 檔案結構可能更加靈活但複雜。 可讀性： GLB：由於是二進制格式，GLB 檔案不容易人工閱讀或編輯。 GLTF：由於是基於 JSON 的，GLTF 檔案較易於閱讀和編輯。開發人員可以用普通的文字編輯器打開和修改。 使用情境： GLB：適合需要快速載入和高效運行的場景，例如實時 3D 應用。 GLTF：由於其可讀性和靈活性，適合用於開發和調試。 檔案大小： GLB：通常會比 GLTF 更小，因為它將所有資料打包在一個二進制檔案中。 GLTF：可能會相對較大，特別是當紋理和其他資源被嵌入 JSON 時。 總的來說，GLB 和 GLTF 都具有各自的優點和適用場景。GLB 更適合性能敏感的應用，而 GLTF 則更適合需要可讀性和可編輯性的情境。如果你在開發階段，可能會選擇使用 GLTF 進行迭代和調試，然後在產品階段轉換為 GLB 以提高效能。 ## 因為公司 Soliwork 只有兩套，設計師也很忙，常常麻煩設計師很不好意思，找了幾個工具進行3D 模型的轉換 ### [vectary Oline tool](https://www.vectary.com/dashboard/?workspaceId=718018e4-f18d-4318-9386-3a40019aea5a) 轉檔需付費，但可以試用幾天 為什麼選擇vectary？ 有許多3D轉換工具可以選擇，但我選擇了vectary，因為它具有直觀的界面，並提供了簡單的導入和導出功能。此外，vectary還有豐富的教學資源，幫助我快速上手。透過這個工具，我可以輕鬆將soliwork檔案轉換為網頁支持的格式 ### blender ( 開源 ) + [stepper plugin](https://ambient.gumroad.com/l/stepper) (付費) ## 接著，將3D 模型轉換成 react 元件 ``` npm i gltfjsx -g npx gltfjsx ``` ## GLB 前面得知產品階段 gltfjsx 會比較好調整，但GLB 會比較小，最終上線 glb 會比較適合， ``` npm i gltf-pipeline -g gltf-pipeline -i scene.gltf -o scene.glb ``` ### 因為 3D 模型都很大，使用者體驗會很不好，透過 gltf-pipeline 在輸出 Glb 可以設定壓縮等級 ``` gltf-pipeline -i -o --draco.compressionLevel=10 gltf-pipeline -i scene.gltf -o mother-board.glb ``` ### 此時，我們己經拿到製作3D 產品展示所需要的檔案，依據[此篇 blog](https://juejin.cn/post/7070009731099656229) ，我們就可以做出我們的 3d 產品展示 ![3D 電腦機殼內部零件展示模型](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/1.png) ### 進階應用 * 加入其他電腦組件 * 風扇轉動 * 貼圖 * 變色功能 * 模型加載時的加載動畫 ( component loading anmiation ) * 產品特點提示 ( part's hint ) * 材質發光 ( bloom 、 emissive ) * 場景 ( Scene ) ### 除錯小技巧-在 group 挷定點擊事件，可以log 點擊到什麼物件 ``` (state.current = null)} onPointerDown={(e) => ( e.stopPropagation(), (state.current = e.object.material.name) )} > ``` ## 手機加載崩潰 本身手機效能比較不好，從原廠拿來的主機板模型太多細節，太複雜的圖型，很容易加載就崩饋了，每個圓型都是很多三角型組成，都需要3D設計師拓樸，來減少三角形面積，如果未來要做 3D 產品選配，每塊主機板或其他零件，甚至要手動要減少一些細節方面，都需要3D 設計師協助，如果未來要做3D 產品選配，則需要一位獨立或外包的3D 設計師。 3D在iphone 目前有蠻大的限制，在 iOS本身對Safari 記憶體的上限是[384 MB](https://github.com/wojtekmaj/react-pdf/issues/1601)，超過也是會重新整理。 ![3D 渲染的綠色電腦主機板模型](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/3.png) ![電腦螢幕顯示3D建模軟體中的電子零件線框模型](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/4.png) ## 如果你們是 Next js 在本地端除錯是正常，推到生產環境出現這個訊息"next js application error a client-side exception has occurred"，請修改成用戶端渲染，伺服器端是reder 不了3D 的元件。 ## 最後 ![3D渲染的電腦主機內部零件配置](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/2.png) [Demo](https://www.ibuypower.com/3d-showroom/y70) 隨著技術的發展，3D網頁模型線上展示和3D產品選配應用將會越來越廣泛，了解並掌握這些技術於開發者是至關重要的，畢竟，只有跟上時代的腳步，我們才能為客戶提供最好的使用體驗。 僅管目前 Web 3D 仍有些限制，像網路速度跟不上，3D模型太肥大，手機在iOS 某些特效及材質顯示支援度還不夠及手機效能及記憶體較要求，但隨著技術及基礎建設的進步，未來 3D一定可以期待實作更多的應用。 ## 參考資料 [參考資料](https://www.vectary.com/3d-modeling-blog/vectary-3d-converter-import-more-than-sixty-3d-file-formats/) [參考資料](https://www.vectary.com/) [參考資料](https://maingear.com/maingear-mg-1-live-3d-configurator/) [參考資料](https://parametric-architecture.com/8-free-browser-based-3d-modeling-software-for-beginners/) [參考資料](https://github.com/pmndrs/gltfjsx) [參考資料](https://gltf.pmnd.rs/) [參考資料](https://sketchfab.com/feed) [參考資料](https://github.com/facebookincubator/FBX2glTF/releases) [參考資料](https://juejin.cn/post/7070009731099656229?fbclid=IwAR336hISkigeYAP3ONzjjRYSgAQjojmO4WEX_lPV9hr15Zh99TuRFHhIbic) [參考資料](https://www.zakeke.com/#) [參考資料](https://blog.logrocket.com/configure-3d-models-react-three-fiber/) [參考資料](https://keyboardsimulator.xyz/) [參考資料](https://admin-fts.threekit.com/signin) [參考資料](https://zhuanlan.zhihu.com/p/349803849) [參考資料](https://github.com/weianweigan/DuSwToglTF/releases) [參考資料](https://zhuanlan.zhihu.com/p/97961663) [參考資料](https://www.keyshot.com/) [參考資料](https://sketchfab.com/search?q=coding&type=models) [參考資料](https://keyboardsimulator.xyz/) [參考資料](https://zhuanlan.zhihu.com/p/469548652) [參考資料](https://codesandbox.io/s/r3f-image-loader-4u8oy?from-embed=&file=/src/App.js:0-765) [參考資料](https://dev.to/wawasensei/creating-a-3d-table-configurator-with-react-three-fiber-1dl2) [參考資料](https://juejin.cn/post/7046043181406191629) [參考資料](https://zhuanlan.zhihu.com/p/601278889) [參考資料](https://threejs.org/editor/) [參考資料](https://github.com/belopot/3d-product-configurator/tree/master/src) [參考資料](https://dribbble.com/tags/configurator?page=2&s=popular) [參考資料](https://juejin.cn/post/7171075542882451463) [參考資料](https://blog.csdn.net/tucHUan1/article/details/119063265) [參考資料](https://hackmd.io/@TANGRAMxAR/ry9UbdEEP) --- ## 關於本文與作者 本文出自 [Mark Ku's Blog](https://blog.markkulab.net/post/react-three-fiber-3d-showroom-note) 授權條款： [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — 轉載或引用請註明作者並附上原文連結 ### 關於作者 **[Mark Ku](https://blog.markkulab.net/author/mark-ku)** — Software Solution Provider - 10+ 年資深軟體工程師，現為 AI 應用 Builder - 專注大型平台架構設計，從北美電商到AI SaaS訂閱收費系統 - 結合 AI Agent 與自動化，打造高效可演進的產品技術基礎 ### 作者開發的免費工具 以下工具皆可免費使用： - [免費 PDF 簽名工具](https://blog.markkulab.net/tools/pdf-sign): 線上 PDF 簽名工具，瀏覽器內完成手繪、打字、上傳簽名，可拖曳放置、縮放、下載。所有處理都在你的裝置完成，檔案不會上傳。 - [VS Code Refactory](https://blog.markkulab.net/tools/refactory): Refactory 是一款 VS Code 重構擴充套件：34 個重構動作、37 條 code smell 檢查、Code Health 儀表板、18 種語言、534 支測試。懂你的專案慣例：介面放哪、DI 註冊寫在哪、'use client' 該不該加；還會用 git 修改頻率 × 複雜度排出「該先修哪個檔案」，並一鍵把壞味道交給你自己電腦上的 Claude Code 修。免費使用，原始碼不離開你的機器。 - [DB-Kit 資料庫管理工具](https://blog.markkulab.net/tools/db-kit): DB-Kit 是一個用 Tauri + Rust + React 打造的輕量跨平台資料庫管理工具，用單一一致的介面同時管理 MySQL、MariaDB、PostgreSQL、SQL Server、Oracle、SQLite、MongoDB、Redis、Kafka、Elasticsearch 與 RabbitMQ 十一種資料來源：連線密碼以 OS keychain 加密、SSH Tunnel、完整 CRUD、視覺化查詢建構器、多結果集同時顯示、跨連線資料傳輸與比對同步、Excel / CSV 匯入匯出、執行計畫視覺化、ER 圖、排程備份、SQL 壓力測試（p50～p99 延遲百分位）、15 條規則的 SQL 審查、Kafka 訊息瀏覽與監控告警；繁中 / 英文雙語介面，內建 AI 助手（自然語言生成 SQL、AI 審查與調校建議）與命令列工具 dbk。免費開源（MIT），提供 Windows / macOS / Linux 安裝檔。 - [VS Code Super Mermaid](https://blog.markkulab.net/tools/super-mermaid): Super Mermaid 是一款 VS Code 擴充套件：開箱即用的漂亮 Mermaid 圖表，自動上色、即時預覽、滑鼠平移縮放、PNG / SVG 高解析匯出，內建 21 種範本與多種主題。免費開源（MIT）。 - [React Super Mermaid](https://blog.markkulab.net/tools/react-super-mermaid): react-super-mermaid 是一個開源 React 元件庫：一行 即可渲染漂亮的 Mermaid 圖表，內建 colorful / sketch 主題、平移縮放、圖內搜尋、SVG / PNG 高解析匯出。輕量、SSR 安全、完整 TypeScript 型別。免費開源（MIT）。 - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/tools/jira-super-mermaid): Atlassian Forge app：在 Jira issue 與 Confluence 內文直接寫 Mermaid 語法，畫流程圖、時序圖、狀態機與甘特圖。11 種圖表、SVG / PNG 匯出、明暗主題、完整中日韓文字支援。取得 Runs on Atlassian 資格：圖表存在你自己的站台，app 不呼叫任何第三方服務。免費，即將上架 Atlassian Marketplace。 - [Mermaid 線上預覽](https://blog.markkulab.net/tools/mermaid-preview): 在瀏覽器裡寫 Mermaid、即時看圖，整張圖表壓進網址就能分享。免註冊、不上傳伺服器，相容 mermaid.live 的分享連結。 - [React Intl Phone Number](https://blog.markkulab.net/tools/react-intl-phone-number): react-intl-phone-number 是一個開源 React 元件：framework-agnostic、不依賴 antd，提供 E.164 進出、可搜尋國旗 / 國碼下拉、可配置驗證等級（strict / mobile-strict / loose）、可主題化 CSS 與 i18n，電話邏輯由 google-libphonenumber 驅動。輕量、完整 TypeScript 型別。免費開源（MIT）。 - [Uptime Kuma Cluster](https://blog.markkulab.net/tools/uptime-kuma-cluster): 把單機版 Uptime Kuma 改造成高可用叢集：OpenResty + Lua 智慧負載平衡、MariaDB 共享狀態、健康檢查與自動 Failover，附叢集管理 REST API，一行 Docker Compose 啟動。免費開源（MIT）。 - [特教專案](https://blog.markkulab.net/education): 為特殊教育學生製作的學習教材 ### 每日 Podcast - [科技新鮮事](https://blog.markkulab.net/category/tech-news): 每日精選 AI 與科技趨勢，透過語音摘要快速掌握最新技術動態，涵蓋 AI 應用、軟體架構、DevOps 與工程實戰。 — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/category/ai-stock-chat): 每個交易日用 AI 分析台股盤勢，以雙人對話聊當天的盤中觀察與隔日預測。 — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml ### 電子報 [訂閱電子報](https://blog.markkulab.net/subscribe) — 第一時間收到新文章通知，無垃圾信、隨時可取消訂閱。