Skip to content

R3F JSX/TSX Exporter

by Tom-Heeley·Workflow

Images © Tom-Heeley. Used for product review; image policy.

Why we like it

Earns its place in the Blender extensions library for collapsing the export-then-gltfjsx routine into one step and keeping the .glb and its component from drifting apart.

What is R3F JSX/TSX Exporter?

Exporting a Blender scene to React Three Fiber usually takes two tools: you write a GLB, then run gltfjsx or a web converter to generate the component. Change the scene and you repeat both steps, and the two files can drift out of sync. R3F JSX/TSX Exporter, built by Tom-Heeley, handles both steps natively — tweak the scene, click Export GLB + Component, and refresh your app.

The add-on writes a .glb and a matching JSX or TSX component to folders you choose. TypeScript output ships a typed GLTFResult covering the exact nodes and materials the component uses, and you can preview the generated code before anything is written. Per-mesh control lets you include or exclude meshes and toggle castShadow and receiveShadow individually.

To use it, press N in the 3D Viewport, open the BR3F tab, set a component name and output folders, pick JSX or TSX, then export. The component loads through drei's useGLTF, which works with Vite, Next.js and CRA. Familiarity with React and Three.js is expected before diving in.

Who is R3F JSX/TSX Exporter best for?

R3F JSX/TSX Exporter is best for react Three Fiber developers who build scenes in Blender and need matching components alongside their GLB files.

How much does R3F JSX/TSX Exporter cost?

R3F JSX/TSX Exporter is completely free to download and use.

Key features

  • One-click export that writes a .glb and a matching JSX or TSX component to folders you choose
  • JSX or TSX output, with the TypeScript path shipping a typed GLTFResult for the exact nodes and materials the component uses
  • Per-mesh control to include or exclude meshes and toggle castShadow and receiveShadow individually
  • Preview Code to inspect the generated component before writing anything
  • Components load through drei's useGLTF, which works with Vite, Next.js and CRA
  • Accessed from the BR3F tab in the 3D Viewport sidebar (press N)

Tags

#React Three Fiber#GLB export#JSX#TSX#Three.js#Import-Export#Blender add-on

Frequently asked questions

Does R3F JSX/TSX Exporter work with Blender 4.2?

R3F JSX/TSX Exporter is compatible with Blender 4.2 LTS and newer, so any recent release should run it. After installing, press N in the 3D Viewport to open the sidebar, then switch to the BR3F tab where the export controls live. From there you set a component name and your output folders, choose JSX or TSX, and click Export GLB + Component. The add-on is distributed as a Blender extension, so you can drag and drop the downloaded file into Blender or install it from disk through the extensions preferences.

What frameworks does the component exported by R3F JSX/TSX Exporter support?

R3F JSX/TSX Exporter generates a React Three Fiber component that loads its GLB through drei's useGLTF, which works out of the box with Vite, Next.js and CRA. You choose JSX or TSX at export time, and the TypeScript path ships a typed GLTFResult describing the exact nodes and materials the component uses. Because the add-on writes both the .glb and the matching component in one pass, you can adjust the scene, re-export, and refresh your app without running a separate converter like gltfjsx afterward.

Do I need to know React and Three.js to use R3F JSX/TSX Exporter?

R3F JSX/TSX Exporter expects you to be comfortable with both React and Three.js before using it. The developer suggests consulting the official React documentation, particularly the section on hooks, and reviewing Three.js resources if you are new to either. The add-on produces React Three Fiber components and the GLB they load, so you will be working with that ecosystem directly, including drei's useGLTF helper. If React is unfamiliar, the developer points to learning materials before diving into the export workflow.

Is R3F JSX/TSX Exporter free, and what license does it use?

R3F JSX/TSX Exporter is listed as free in this catalog and is distributed under the GNU General Public License v3.0 or later. For current licensing terms, check the developer's page on GitHub. Version 0.1.1, released June 17th, 2026, removes the attribution message that earlier exports added to generated files. The extension also requests a Files permission so it can write the .glb and the generated component into the project folders you select during export.

Alternatives to R3F JSX/TSX Exporter

Also in Workflow for Blender.

Similar plugins