Export your Blender scene to a .glb plus a ready-to-use
React Three Fiber component —
in one click, from inside Blender.
Blender scene ──► public/myScene.glb + src/components/MyScene.tsx (or .jsx)
The add-on's logic is a single Python file: BR3F.py — no Node.js,
no CLI, no dependencies. (A small blender_manifest.toml
and a one-line __init__.py wrap it for the Blender 4.2+ Extensions platform.)
Getting a Blender model into an R3F project normally takes two tools: export
a GLB from Blender, then run gltfjsx (or paste the file into a web
converter) to generate the component. When you're iterating on lots of
models, that round trip adds up fast — every scene tweak means exporting
and converting again, and the GLB and component quietly drift out of sync.
BR3F does both steps natively in Blender. Tweak your scene, click Export
GLB + Component, refresh your app. You can even set per-mesh preferences
for the output, like adding castShadow or receiveShadow to individual
meshes.
BR3F is the project name; in Blender the add-on installs as R3F JSX/TSX Exporter and adds a BR3F tab to the 3D viewport sidebar.
- Download the latest
br3f-x.y.z.zipfrom the Releases page (or build it yourself — see CONTRIBUTING.md). - Drag the
.zipinto Blender, or go to Edit → Preferences → Add-ons → ⌄ → Install from Disk… and pick it. - Enable R3F JSX/TSX Exporter in the add-on list.
- Download
BR3F.py. - In Blender: Edit → Preferences → Add-ons → Install… and pick the file.
- Enable R3F JSX/TSX Exporter in the add-on list.
- Press
Nin the 3D viewport and open the BR3F tab. - Set the Component Name (e.g.
MyScene). - Point GLB Folder at your app's
public/directory and Component Folder atsrc/components/(leave the component folder empty to write both files side by side). - Pick JSX or TSX.
- In the Meshes list, tick which meshes to include and toggle their
castShadow/receiveShadowprops individually. - Click Export GLB + Component.
Then use it like any other component:
import { MyScene } from './components/MyScene'
<Canvas>
<MyScene position={[0, 0, 0]} />
</Canvas>The generated component loads the model with drei's useGLTF from
/<name>.glb — which works out of the box with Vite, Next.js and CRA, since
they all serve the public/ folder at the web root.
💡 Tip: hit Preview Code first to see exactly what BR3F will generate — no files written until you're happy.
- Per-mesh control — the panel lists every mesh in the scene with
checkboxes to include/exclude it from the export and to toggle its
castShadow/receiveShadowprops individually. - JSX or TSX — TypeScript output includes a typed
GLTFResultbuilt from the exact nodes and materials the component references. - Preview Code — opens the generated component in a new window before you write anything to your project.
- Faithful output — node keys match what three.js
GLTFLoaderproduces at runtime (name sanitization and deduplication), rotations are converted from quaternions to Euler angles, identity transforms are omitted, and multi-material meshes expand into a group the same way the loader builds them. - Settings stick — export options are stored in the
.blendfile; per-mesh flags are stored on the objects themselves.
Where BR3F might go next — ideas, not promises, and all open to contribution. Got a use case or want to pick one up? Open an issue.
v0.2 — closing the obvious gaps
- Export animations and wire up drei's
useAnimations - Scope the export to a chosen collection or the current selection
- Draco compression toggle for smaller
.glbfiles
v0.3 — nice-to-haves
- Instancing / merging for repeated meshes (
<Instances>/<Merged>) - Emit cameras and lights instead of skipping them
- Copy-to-clipboard in the Preview window
v1.0 — platform & polish
- Blender 4.2+ extension manifest (
blender_manifest.toml) for the Extensions platform - Publish BR3F on extensions.blender.org
- Shape keys / morph target support
Project plumbing
- CI that runs
_smoke_test.pyon every pull request
Bug reports, ideas and pull requests are welcome — see CONTRIBUTING.md.
GPL-3.0-or-later (as required for Blender addons).
Generated components include a short attribution comment — please keep it intact.