A Production-Ready React Three Fiber Meshy Pipeline for Web

Adding 3D to a website used to be a trade-off. You could have a visually rich experience, or you could have a fast-loading site, especially on mobile networks in Malaysia. Picking both was difficult and expensive. Today, AI-driven tools have changed the equation. It's now possible to generate and deploy high-quality, low-footprint 3D assets efficiently.

At JRV Systems, we've developed a process that balances visual quality with real-world performance. This isn't about chasing trends; it's about delivering tangible value to businesses, whether for an e-commerce product view or an interactive dashboard element. This is our practical, production-ready React Three Fiber Meshy pipeline.

The Core Pipeline: From Text to Live Component

The goal is to move from a simple text prompt to a performant, interactive 3D component in a React application. Our pipeline consists of four distinct, repeatable steps.

1. Generation with Meshy AI: We start with Meshy's text-to-3D API. A descriptive prompt is key. For example, instead of "a chair," we use "a minimalist wooden dining chair, light oak finish, clean lines, photorealistic." Meshy's API (meshy-1 or meshy-2 models) generates a 3D model and provides a .glb file. This initial file is often detailed but too large for direct web use, typically ranging from 500KB to several megabytes.

2. Refinement in Blender: The AI-generated model is a strong first draft, not a final product. We import the .glb into Blender (a free, open-source 3D tool) for essential cleanup. This involves removing stray vertices, simplifying complex geometry (decimation), and ensuring the material properties are web-friendly. The goal isn't to remodel it, but to optimize it. This step is crucial for quality control.

3. Compression with gltfpack: This is the most critical step for performance. We use gltfpack, a command-line tool from zeux. It aggressively optimizes GLB files for web delivery. A typical command looks like this: gltfpack -i input.glb -o output.glb -cc. The -cc flag performs significant compression on geometry and textures. It's common for us to see a 5MB model from Meshy become a sub-100KB file after this step, often with little perceptible loss in visual quality.

4. Integration with React Three Fiber (R3F): The optimized output.glb is now ready for the web. In our React projects, we use the @react-three/drei library to load the model. To prevent the 3D asset from blocking the initial page load, we wrap it in a component that uses the IntersectionObserver API. The 3D canvas and model are only mounted and downloaded when the user scrolls them into the viewport. This lazy-loading approach is non-negotiable for good Core Web Vitals.

Why We Target a <100KB GLB File

For our clients across Malaysia, from Seremban to KL, the primary user is often on a mobile device with a variable data connection. A heavy 3D asset can cripple the user experience. A large initial download increases bounce rates and frustrates users before they even see the product.

By setting a strict sub-100KB budget per 3D asset, we ensure:

• Fast Initial Load: The main page content loads instantly.
• Low Data Usage: Respects users' mobile data plans.
• Smooth Interaction: The browser isn't struggling to render an overly complex model, leading to better frame rates.

This discipline forces us to be efficient during the refinement and compression stages, resulting in a better final product.

Spline: A Great Tool for a Different Job

Spline is a popular web-based 3D design tool that makes creating interactive scenes easy. So why don't we use it as the primary tool in this pipeline? Control and performance.

Spline is excellent for self-contained, interactive 3D scenes, especially when a designer needs to build something without writing code. However, it exports a larger runtime and gives you less granular control over the final asset optimization. The file sizes are often significantly larger than a gltfpack-optimized GLB.

We see Spline as an 'escape hatch.' If a project requires complex, stateful 3D animations and interactions that are difficult to code manually in R3F, Spline is a viable alternative. But for displaying optimized, programmatic 3D models—like product viewers or decorative elements—our React Three Fiber Meshy pipeline provides superior performance and integration flexibility.

Putting It All Together for a Client

Imagine an e-commerce site for a local furniture maker. They want to show a 3D preview of their best-selling rattan chair. Using our pipeline:

• We generate the chair model with Meshy using a detailed prompt.
• We clean it up in Blender, ensuring the rattan texture looks right.
• We run it through gltfpack, shrinking it from 2MB to 85KB.
• In their Next.js site, the 3D component is lazy-loaded. Users see the product images first, and as they scroll down, the interactive 3D model fades in smoothly.

This approach delivers a premium feature without the associated performance cost. It's a practical application of AI that directly enhances the customer's business. By focusing on a lean, optimized pipeline, we make 3D on the web a feasible and valuable tool, not just a gimmick.