--- title: "Notes on Implementing a 3D Product Showcase with React Three Fiber" description: "A record of the implementation process for developing a 3D product showroom with React Three Fiber, covering GLTF/GLB format conversion, model compression, advanced effects, and solutions for iOS mobile memory limitations." canonical_url: "https://blog.markkulab.net/en/post/react-three-fiber-3d-showroom-note" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2023-10-27 01:01:35 +0300" category: "Frontend" tags: ["three.js", "react", "3d", "gltf", "glb", "nextjs"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Notes on Implementing a 3D Product Showcase with React Three Fiber ## Context Our competitor, [maingear](https://maingear.com/maingear-mg-1-live-3d-configurator/), launched a 3D Configurator, so I spent some time researching 3D technology. ## First, Solving the 3D File Format Problem I got the 3D model file for our company's computer case from the product designer. It was a STEP file, so I started by learning about common web-friendly formats. ## When it comes to 3D product showcases, we need to understand the differences between the two main formats: GLB and GLTF (From ChatGPT) GLB and GLTF are two formats used to represent 3D models, primarily for 3D graphics and virtual reality. Both are based on the glTF (GL Transmission Format), but there are some differences between them: File Structure: GLB: This is a binary file format where all data (including textures, meshes, etc.) is stored in a single binary file. This makes the file smaller and faster to load. GLTF: This is a JSON-based format that can store textures, meshes, etc., in separate binary files or embed them directly into the JSON. Compared to GLB, the GLTF file structure can be more flexible but also more complex. Readability: GLB: Being a binary format, GLB files are not easily human-readable or editable. GLTF: Being JSON-based, GLTF files are easier to read and edit. Developers can open and modify them with a regular text editor. Use Cases: GLB: Suitable for scenarios requiring fast loading and efficient performance, such as real-time 3D applications. GLTF: Due to its readability and flexibility, it's suitable for development and debugging. File Size: GLB: Usually smaller than GLTF because it packs all data into a single binary file. GLTF: Can be relatively larger, especially when textures and other resources are embedded in the JSON. In summary, both GLB and GLTF have their own advantages and use cases. GLB is better for performance-sensitive applications, while GLTF is more suitable for situations that require readability and editability. During the development phase, you might choose to use GLTF for iteration and debugging, then convert to GLB for the production stage to improve performance. ## Our company only has two SolidWorks licenses, and the designers are very busy. I felt bad bothering them frequently, so I looked for some tools to convert 3D models myself. ### [Vectary Online Tool](https://www.vectary.com/dashboard/?workspaceId=718018e4-f18d-4318-9386-3a40019aea5a) Conversion requires payment, but there's a free trial for a few days. Why choose Vectary? There are many 3D conversion tools to choose from, but I chose Vectary because of its intuitive interface and simple import/export features. Additionally, Vectary has rich tutorial resources that helped me get started quickly. With this tool, I could easily convert SolidWorks files into web-supported formats. ### Blender (Open Source) + [Stepper Plugin](https://ambient.gumroad.com/l/stepper) (Paid) ## Next, Converting the 3D Model into a React Component ``` npm i gltfjsx -g npx gltfjsx ``` ## GLB As mentioned earlier, `gltfjsx` is better for adjustments during the product phase, but GLB files are smaller, making them more suitable for the final production deployment. ``` npm i gltf-pipeline -g gltf-pipeline -i scene.gltf -o scene.glb ``` ### Since 3D models are often large, which leads to a poor user experience, you can use gltf-pipeline to set a compression level when exporting to GLB. ``` gltf-pipeline -i -o --draco.compressionLevel=10 gltf-pipeline -i scene.gltf -o mother-board.glb ``` ### At this point, we have the necessary files to create a 3D product showcase. Following [this blog post](https://juejin.cn/post/7070009731099656229), we can build our 3D product display. ![3D render of an open PC case with motherboard, graphics card, fan](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/1.png) ### Advanced Applications * Adding other computer components * Fan animations * Applying textures * Color changing functionality * Loading animation while the model loads (component loading animation) * Product feature tooltips (part's hint) * Material glow effects (bloom, emissive) * Scene setup ### Debugging Tip: Bind a click event to a group to log which object was clicked. ``` (state.current = null)} onPointerDown={(e) => ( e.stopPropagation(), (state.current = e.object.material.name) )} > ``` ## Crashes on Mobile Devices My own phone isn't very powerful. The motherboard model from the original manufacturer had too much detail and complexity, causing it to crash easily on load. Every circle is composed of many triangles, which requires a 3D designer to perform topology optimization to reduce the triangle count. If we want to build a 3D product configurator in the future, every motherboard or other component will need a 3D designer's help, even for manually reducing details. This means we would need a dedicated in-house or freelance 3D designer. 3D on the iPhone currently has significant limitations. iOS itself imposes a memory limit of [384 MB](https://github.com/wojtekmaj/react-pdf/issues/1601) on Safari. Exceeding this will also cause the page to refresh. ![3D model of a green computer motherboard with components](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/3.png)![Wireframe 3D model of a circuit board with circular connectors](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/4.png) ## If you are using Next.js and everything works fine during local debugging, but you get a "next js application error a client-side exception has occurred" message in production, you need to switch to client-side rendering. The server cannot render 3D components. ## In Conclusion ![Rendered computer case showing motherboard, GPU, and red fan](https://blog.markkulab.net/content/markku/posts/react-three-fiber-3d-showroom-note/images/2.png) [Demo](https://www.ibuypower.com/3d-showroom/y70) As technology evolves, online 3D web model showcases and 3D product configurators will become more widespread. It's crucial for developers to understand and master these technologies. After all, only by keeping up with the times can we provide the best user experience for our customers. Although Web 3D still has some limitations—such as slow network speeds, large 3D model sizes, insufficient support for certain effects and materials on iOS, and high demands on mobile performance and memory—we can expect to see more applications implemented in 3D as technology and infrastructure improve. ## References [Reference](https://www.vectary.com/3d-modeling-blog/vectary-3d-converter-import-more-than-sixty-3d-file-formats/) [Reference](https://www.vectary.com/) [Reference](https://maingear.com/maingear-mg-1-live-3d-configurator/) [Reference](https://parametric-architecture.com/8-free-browser-based-3d-modeling-software-for-beginners/) [Reference](https://github.com/pmndrs/gltfjsx) [Reference](https://gltf.pmnd.rs/) [Reference](https://sketchfab.com/feed) [Reference](https://github.com/facebookincubator/FBX2glTF/releases) [Reference](https://juejin.cn/post/7070009731099656229?fbclid=IwAR336hISkigeYAP3ONzjjRYSgAQjojmO4WEX_lPV9hr15Zh99TuRFHhIbic) [Reference](https://www.zakeke.com/#) [Reference](https://blog.logrocket.com/configure-3d-models-react-three-fiber/) [Reference](https://keyboardsimulator.xyz/) [Reference](https://admin-fts.threekit.com/signin) [Reference](https://zhuanlan.zhihu.com/p/349803849) [Reference](https://github.com/weianweigan/DuSwToglTF/releases) [Reference](https://zhuanlan.zhihu.com/p/97961663) [Reference](https://www.keyshot.com/) [Reference](https://sketchfab.com/search?q=coding&type=models) [Reference](https://keyboardsimulator.xyz/) [Reference](https://zhuanlan.zhihu.com/p/469548652) [Reference](https://codesandbox.io/s/r3f-image-loader-4u8oy?from-embed=&file=/src/App.js:0-765) [Reference](https://dev.to/wawasensei/creating-a-3d-table-configurator-with-react-three-fiber-1dl2) [Reference](https://juejin.cn/post/7046043181406191629) [Reference](https://zhuanlan.zhihu.com/p/601278889) [Reference](https://threejs.org/editor/) [Reference](https://github.com/belopot/3d-product-configurator/tree/master/src) [Reference](https://dribbble.com/tags/configurator?page=2&s=popular) [Reference](https://juejin.cn/post/7171075542882451463) [Reference](https://blog.csdn.net/tucHUan1/article/details/119063265) [Reference](https://hackmd.io/@TANGRAMxAR/ry9UbdEEP) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/react-three-fiber-3d-showroom-note) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.