A Production React Three Fiber Meshy Pipeline for Web 3D

Adding 3D elements to a website can make it feel premium, but it often comes with a performance cost. Large 3D files slow down page loads, hurting user experience and SEO. At JRV Systems, we build AI-integrated websites for Malaysian businesses, and we need a process that is both fast to develop and light on the user's connection.

This article outlines our standard production pipeline for integrating simple, high-quality 3D assets into web projects. It’s a practical, repeatable process that balances visual quality with real-world performance constraints.

The Modern React Three Fiber Meshy Pipeline

The core workflow combines several powerful tools to go from an idea to an optimized, interactive web component. The complete React Three Fiber Meshy pipeline looks like this:

1. Generate: Use a text prompt to create a 3D model with an AI service like Meshy.
2. Refine (Optional): Perform minor cleanup on the model in a free tool like Blender.
3. Compress: Drastically reduce the file size using a command-line tool called gltfpack.
4. Implement: Load the compressed model efficiently in a React application using React Three Fiber (R3F), gated by an IntersectionObserver.

This approach allows for rapid iteration without needing deep 3D modeling expertise for every asset. It gives us full control over the final file size and loading behaviour, which is critical for production websites.

Step 1: Generating Assets with Meshy AI

Traditional 3D modeling is time-consuming and requires specialized skills. AI text-to-3D services change this by allowing us to generate models from simple descriptions. We use Meshy (meshy.ai) for this step.

The process is straightforward. You provide a detailed prompt, such as "a modern minimalist wooden stool, light oak, smooth finish, photorealistic," and select a style. Meshy's API, specifically the text-to-3d-v2 model, then generates a 3D model, typically in the GLB format. This format is the web standard for 3D, as it bundles geometry, materials, and textures into a single file.

Cost is a practical consideration. Meshy uses a credit system. A single text-to-3D generation might cost 20 credits, which can be as low as USD $0.20 depending on your plan. This is significantly cheaper and faster than commissioning a 3D artist for simple decorative assets, making it viable for a wider range of projects.

The key is prompt engineering. The better the prompt, the less refinement the model needs later.

Step 2: Refining and Compressing for Performance

An AI-generated model is a great starting point, but it's rarely optimized for the web. The raw GLB file from Meshy might be several megabytes in size, which is far too large.

First, we do an optional refinement step in Blender. This can involve removing stray vertices, simplifying the geometry with the 'Decimate' modifier, or checking that the material properties are correct. This step takes just a few minutes but can improve both the look and performance of the model.

Next comes the most critical step: compression. We use gltfpack, a command-line tool developed by Arseny Kapoulkine. It is exceptionally effective at optimizing glTF and GLB files. Our goal for most decorative web assets is a file size under 100KB.

A typical command looks like this:

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

Let's break down the flags:

• -i model.glb: Specifies the input file.
• -o model-opt.glb: Specifies the output file.
• -cc: Compresses the geometry and other data using the Draco library (for geometry) and zstd (for everything else). This provides the biggest savings.
• -tc: Compresses textures using Basis Universal into the KTX2 format, which modern GPUs can decompress efficiently.

This single command can often reduce a file size by 90% or more with minimal perceptible loss in quality, making it an essential part of our React Three Fiber Meshy pipeline.

Step 3: Efficient Loading in React Three Fiber

With our sub-100KB model-opt.glb file ready, the final step is to load it into our React application. Simply placing a 3D component on the page would still mean the user downloads the asset on initial page load, even if it's not visible.

We solve this with lazy loading triggered by an IntersectionObserver. This browser API lets us know when an element enters the viewport. Here’s the pattern we use:

1. Create a wrapper component that uses a hook like useInView from the react-intersection-observer library.
2. This component renders a simple placeholder div with a fixed height, reserving space for the 3D canvas.
3. Only when the inView flag becomes true do we render the actual R3F <Canvas> component and load the model using the useGLTF helper from the @react-three/drei library.

This ensures the 3D asset is only downloaded and rendered when the user scrolls to it. This technique is crucial for maintaining a high Lighthouse score and a fast initial load time, especially on mobile connections common in Malaysia.

Why Not Just Use Spline?

Spline is a fantastic browser-based 3D design tool that makes creating and embedding interactive 3D scenes very easy. So why not use it for everything?

Spline is an excellent choice for complex, self-contained interactive experiences or for teams without any developers. However, it comes with trade-offs:

• Less Control: You have less granular control over the final asset optimization and loading logic. The Spline runtime itself adds overhead to your page.
• Abstraction: While easy to use, it abstracts away the underlying technology. Our pipeline gives us direct access to the GLB file and the R3F scene graph, allowing for deeper integration with the rest of the React application state.

We see Spline as an escape hatch, not the default path. For embedding a few optimized, high-performance models into a larger website, the Meshy-to-R3F pipeline provides superior performance and control. It keeps our dependencies minimal and our final bundle size small.

A Practical Summary for Decision Makers

For founders and managers, the technical details translate into direct business benefits. This pipeline allows us to:

• Reduce Costs: AI generation is cheaper than manual modeling for many common assets.
• Increase Speed: We can go from concept to a deployed 3D feature in hours, not days.
• Protect Performance: By enforcing a sub-100KB asset size and lazy loading, we add engaging features without slowing down the site.

At JRV Systems, we believe in using the right tool for the job. This React Three Fiber Meshy pipeline is a pragmatic and powerful way to build modern, performant web experiences that stand out. It’s a reflection of our approach: combining cutting-edge tools with a disciplined focus on engineering fundamentals.