A Production React Three Fiber Meshy Pipeline for Web 3D

Adding 3D to a website can make it feel premium and interactive. But it often comes at a high cost: slow load times and heavy bandwidth usage. For users in Malaysia, especially on mobile data, a multi-megabyte 3D model is a non-starter. At JRV Systems, we've developed a pipeline to deliver high-quality 3D experiences that are lightweight and performant.

This process combines AI generation, manual refinement, and aggressive optimization to create assets that look great without frustrating users. It’s a practical approach for real-world projects, not a theoretical exercise.

The Core Challenge: Balancing Quality and Performance

The fundamental problem with web 3D is file size. A detailed model straight from a design tool can easily be 5-10 MB. Loading this on a typical Malaysian 4G connection can take several seconds, blocking the rest of the page and hurting your Core Web Vitals score. Our goal is to avoid this entirely.

Our internal benchmark for any decorative or illustrative 3D asset is strict: the final GLB file must be under 100KB. This target forces a disciplined approach to optimization at every stage. A React Three Fiber Meshy pipeline is how we achieve this, balancing the speed of AI with the control of manual optimization.

Step 1: Generating Base Assets with Meshy AI

We start the process with Meshy AI, a text-to-3D generation tool. It allows us to rapidly prototype ideas without spending days on initial modeling. The workflow is straightforward:

1. Write a detailed prompt: Specificity is key. Instead of "a chair", we use "A sleek, minimalist office chair, dark grey fabric, chrome legs, photorealistic style".
2. Generate and iterate: We use the Meshy API or their web interface to generate initial models. The AI produces a textured 3D model in a few minutes.

Meshy's pricing is based on credits, which makes it accessible for generating multiple concepts for a project. However, the output is just a starting point. The geometry (topology) is often messy and not optimized for real-time rendering, and the textures can be low-resolution. The AI gets us about 70% of the way there, providing a solid base to build upon.

Step 2: Manual Refinement in Blender

This is where human skill becomes critical. We take the raw output from Meshy and bring it into Blender, the open-source 3D software. This refinement stage is non-negotiable for production quality.

Our checklist in Blender includes:

• Retopology: We rebuild the model's geometry to be much simpler and cleaner. This drastically reduces the polygon count while preserving the overall shape. A model from Meshy might have 50,000 polygons; we aim to reduce it to under 5,000.
• UV Unwrapping: We create a clean, efficient UV map. This is like creating a flat pattern of the 3D model's surface, which allows textures to be applied correctly and efficiently.
• Texture Enhancement: The AI-generated textures are often a good starting point for color and pattern, but we usually enhance them or bake details from a high-poly version onto the new, low-poly model's texture map. This creates the illusion of detail without adding geometry.

This step requires 3D artistry and technical knowledge, which is a core capability we've built at JRV Systems. It's the most time-consuming part of the pipeline, but it's what separates a professional result from a rough AI-generated asset.

Step 3: Aggressive Compression with gltfpack

Once the model is refined in Blender, we perform a final, crucial optimization step using a command-line tool called gltfpack. Developed by Arseny Kapoulkine (zeux), it's an essential part of our React Three Fiber Meshy pipeline.

We run a command like gltfpack -i model.glb -o model-opt.glb -cc -tc. This does several things:

• Mesh Optimization: It quantizes vertex data, which means it uses less precision to store vertex positions, normals, and texture coordinates. This significantly reduces file size with almost no perceptible visual difference.
• Texture Compression: The -tc flag converts textures to the KTX2 / Basis Universal format. This is a modern texture format that stays compressed on the GPU, reducing memory usage and improving rendering performance. It's a massive win for mobile devices.

It's common for gltfpack to reduce a file's size by 80-90%. A 1MB model from Blender often becomes a ~100KB file ready for the web.

Step 4: Integration with React Three Fiber

With our sub-100KB GLB file, we're ready to bring it into the front-end. We use React Three Fiber (R3F), a library that lets us build 3D scenes declaratively within a React application.

The key to performance here is not just the small file size, but also how we load it. We never load the 3D model on the initial page render. Instead, we use a lazy-loading strategy.

We wrap our R3F canvas component in a controller that uses the browser's IntersectionObserver API. This API watches to see if an element is visible on the screen. The 3D model is only fetched from the network and rendered when the user scrolls down and the component is about to enter the viewport. This ensures the 3D asset doesn't impact the initial load time or the all-important Largest Contentful Paint (LCP) metric.

When to Use Spline Instead

Spline is a popular browser-based 3D editor that makes it very easy to create and embed 3D scenes. So why go through our complex pipeline?

The answer is control and integration. Our pipeline gives us absolute control over optimization, allowing us to reliably hit our <100KB target. Spline exports can be larger and less predictable. Furthermore, by using R3F, our 3D scene is a true part of the React application. We can connect it to application state, trigger animations based on user actions, and integrate it with other data sources. A Spline embed is more like an isolated iframe; powerful for visuals, but harder to integrate deeply.

Spline is an excellent tool, and we recommend it for simpler, non-interactive decorative scenes or when a team lacks the developer resources for a full R3F implementation. We see it as a valuable alternative, not the foundation of a high-performance React Three Fiber Meshy pipeline.

This entire process, from AI prompt to lazy-loaded component, is designed to deliver the best of both worlds: a visually rich 3D experience that respects the user's device and data plan. It's a measured, technical approach that delivers consistent, professional results.