A Production React Three Fiber Meshy Pipeline for Web 3D

Why a Pipeline for AI 3D Assets?

AI tools like Meshy can generate 3D models from text prompts in minutes. This is a massive speed advantage, but the raw output is rarely ready for a production website. These models often have high polygon counts, unoptimized textures, and other issues that can slow down a web page, especially for users in Malaysia with varying mobile data speeds. A structured process is crucial to bridge the gap between AI speed and production quality.

This is why at JRV Systems, we use a defined React Three Fiber Meshy pipeline. It ensures that every 3D asset we deploy for client projects—whether for e-commerce or interactive dashboards—is lightweight, performant, and looks professional. The goal is to deliver a premium 3D experience without compromising on loading times.

Step 1: Generating the Base Model with Meshy AI

Our process begins with Meshy AI's text-to-3D feature. It's an excellent starting point for creating unique assets quickly. The key is to write descriptive prompts. Instead of "a chair," a better prompt is "a minimalist wooden dining chair, light oak finish, clean lines, photorealistic style."

The Meshy API is straightforward to integrate into internal tools. Their pricing is accessible; the Pro plan is around $24 USD per month for 2,000 credits. A single text-to-3D generation typically consumes about 20 credits, making it cost-effective for experimentation and production.

The output from Meshy is a textured model, usually in GLB or FBX format. This model serves as our base, but it's not the final version. It's a high-quality draft that needs refinement.

Step 2: Refining and Preparing the 3D Model

This is the essential "human-in-the-loop" stage where technical artistry comes in. We bring the generated model into Blender, a powerful and free open-source 3D software. This step is non-negotiable for ensuring quality.

Our standard refinement checklist includes:

• Decimation: The raw model might have 100,000+ polygons. We use Blender's Decimate modifier to reduce this count significantly, often by 80-90%, while preserving the overall shape.
• Retopology: For critical hero assets, we may manually rebuild the geometry (retopology) for perfect edge flow and deformation, though this is less common for static objects.
• UV Unwrapping: We check and clean up the UV maps to ensure textures apply correctly without distortion.
• Texture Optimization: AI-generated textures can be large (e.g., 4K resolution). We resize them to more web-friendly dimensions like 1024x1024 or 512x512, depending on the asset's importance.

This manual step ensures the model is not just visually appealing but also technically sound for real-time rendering in a browser.

Step 3: Compression with gltfpack

Once the model is refined in Blender, the final optimization step is compression. For this, we rely on gltfpack, a command-line tool developed by zeux. It is incredibly effective at reducing the file size of GLB/glTF files.

gltfpack performs several optimizations:

• Mesh Optimization: It re-orders vertices for better GPU cache performance.
• Quantization: It reduces the precision of vertex data, which shrinks file size with minimal visual impact.
• Texture Compression: It can convert standard PNG/JPEG textures into a super-compressed format like Basis Universal inside a KTX2 container, which modern GPUs can decode directly.

A typical command might look like this: gltfpack -i model.gltf -o model.glb -cc. The -cc flag performs aggressive compression. It's common for this tool to reduce a file size by 50-70% or more. Our target is to get every decorative 3D asset under 100KB, which is achievable with this process.

Step 4: Loading in React Three Fiber with IntersectionObserver

With a highly optimized GLB file, we move to the front-end implementation using React Three Fiber (R3F). Loading large assets can block the main thread and hurt Core Web Vitals. Our strategy is to load 3D content lazily.

We wrap our R3F <Canvas> component in a trigger that only activates when the component is about to enter the user's viewport. The react-intersection-observer package is perfect for this. When the observer detects the component is visible, we change a state variable that allows the canvas and the 3D model to mount and load.

Inside the canvas, we use React's <Suspense> component. This lets us show a lightweight placeholder (like a simple box or a loading spinner) while the GLB file is being downloaded by R3F's useGLTF hook. This prevents jarring layout shifts and provides a smooth user experience.

When to Use Spline Instead

Spline is another popular tool for web 3D. It's an excellent all-in-one editor and runtime, especially for creating interactive 3D scenes and animations without writing much code. We see it as a great tool for rapid prototyping or for projects where the 3D is a self-contained, complex interactive element.

However, for integrating multiple, discrete 3D product models into a custom e-commerce site or a web application, our React Three Fiber Meshy pipeline offers more control. We can manage each asset's loading state, optimize file sizes to extreme degrees, and integrate them seamlessly with the rest of the React UI. Spline's exports can sometimes be larger and offer less granular control over performance, making our custom pipeline the more robust choice for production systems.

Conclusion: A Practical Workflow for Production 3D

This pipeline—from Meshy's AI generation to Blender's refinement, gltfpack's compression, and R3F's intelligent loading—provides a reliable path for using 3D on the web. It balances the incredible speed of AI generation with the rigorous optimization required for high-performance web applications. By following these steps, we can deliver rich 3D experiences that are accessible and fast for all users, regardless of their device or connection speed.