A Production-Ready React Three Fiber Meshy Pipeline for the Web

Adding 3D to a website is a powerful way to showcase products or explain concepts. But it often comes with a heavy performance cost. Large 3D models and complex libraries can slow down page loads, especially on mobile networks common in Malaysia. The challenge is to deliver a premium 3D experience without the performance penalty.

AI tools like Meshy have made creating 3D assets more accessible than ever. Instead of weeks of manual modelling, you can generate a base model from a text prompt in minutes. This article outlines the practical, production-ready React Three Fiber Meshy pipeline we use at JRV Systems to take an idea from a prompt to a highly optimized, interactive element on a live website.

The React Three Fiber Meshy Pipeline Explained

This pipeline is a series of steps, not a single tool. It's a process designed to maintain quality while aggressively optimizing for web performance. Each stage has a specific purpose:

• Meshy AI: The starting point. We use its text-to-3D API to generate the initial 3D model. It's fast for prototyping and creating unique assets that don't exist in standard libraries.
• Blender: The refinement stage. Raw AI output is rarely perfect. We use Blender, a free and powerful open-source 3D tool, to clean the model's geometry, simplify materials, and prepare it for the web.
• gltfpack: The compression engine. This command-line tool is essential for shrinking the model's file size. It performs advanced mesh and texture optimization that goes beyond standard exports.
• React Three Fiber (R3F): The rendering layer. R3F allows us to treat 3D scenes as declarative React components, making it easy to integrate them into our web applications and manage state.

This structured approach ensures we don't just dump a heavy, unoptimized model onto a webpage. The goal is a final GLB asset under 100KB that loads instantly.

Step 1: Generating the Base Model with Meshy

Everything begins with a prompt. The quality of your prompt directly impacts the quality of the initial model. Instead of a simple "a chair," a better prompt is "a minimalist Scandinavian armchair, light oak wood, with a grey fabric cushion, studio lighting."

Meshy's API operates on a credit system. A typical text-to-3D generation might cost around 20 credits. You'll receive a model in a format like GLB, which is the standard for web 3D. The initial output is often high-polygon and may have complex materials. This is our raw material, not the final product.

For example, we recently worked on a concept for a local furniture brand's e-commerce site. We used Meshy to quickly generate different chair styles. This allowed us to visualize options in a 3D space far faster than traditional modelling would have allowed.

Step 2: Refining and Compressing with Blender and gltfpack

This is the most critical step for performance. A raw 10MB model from Meshy is unusable on the web. Our target is under 100KB.

First, we import the GLB into Blender. Here, we perform several actions:

• Decimation: We reduce the polygon count, removing geometric detail that isn't visible from a distance.
• Material Consolidation: We simplify materials and bake textures into a single, smaller image file (a texture atlas).
• Cleanup: We fix any flipped normals or non-manifold geometry that the AI generation might have produced.

Once refined in Blender, we export it again as a GLB. The final step is running it through gltfpack. This tool from the meshoptimizer library is incredible. A simple command can drastically reduce file size:

gltfpack -i model.glb -o model-opt.glb -cc

The -cc flag applies a suite of compression techniques, often cutting the file size by another 50-80% without a noticeable loss in visual quality. This step alone can be the difference between a 5-second load time and a 500-millisecond one.

Step 3: Lazy-Loading the Model in R3F

Now that we have a tiny model-opt.glb file, we need to load it efficiently. Loading a 3D model means loading the Three.js library (hundreds of kilobytes) and the model itself. Doing this on initial page load is wasteful if the model isn't even visible.

Our solution is to gate the entire 3D canvas using an IntersectionObserver. This is a browser API that detects when an element enters the viewport. Here's the logic:

1. Create a placeholder div where the 3D scene will live.
2. Use an IntersectionObserver to watch this div.
3. Only when the user scrolls and the div becomes visible do we dynamically load and render the R3F <Canvas> component containing our model.

This technique ensures that the 3D assets have zero impact on the initial page load metrics, like First Contentful Paint (FCP). The user gets a fast-loading page, and the 3D experience is loaded just-in-time.

Why Not Just Use Spline?

Spline is an excellent browser-based tool for creating 3D scenes, and we sometimes recommend it. However, for a component-based, code-first React Three Fiber Meshy pipeline, Spline isn't always the right primary tool.

Spline is a self-contained ecosystem. It's great for building entire interactive scenes visually. But when you need to tightly integrate a 3D object with your application's state, or when you need absolute control over asset compression down to the last kilobyte, the R3F pipeline is superior.

We see Spline as a valuable "escape hatch." If a client needs a complex, physics-based animation that is difficult to code by hand, building it in Spline and exporting it can be faster. But for integrating single, highly optimized models generated via AI into a larger React application, our pipeline provides more control and better performance outcomes.