XPRTIX 3D
Turn a GLB into a React component.
Get a Model.jsx for React Three Fiber, with your meshes and materials named, and the GLB beside it. Nothing is uploaded.
heaviest partshidden geometryfit to budgetcompareOBJ → GLBMeshoptDracoXPRTIX 3D
Turn a GLB into a React component: how it works
What you get
The download is a zip of two files: Model.jsx, a React (JSX) component, and model.glb. Put the GLB in your public folder, import the component into a Canvas, and the model is there, with its meshes and materials available by name so you can change a colour, hide a part or attach an event to it.
The component uses useGLTF from drei, the same pattern the gltfjsx tool writes. It is JSX, not TSX: add types yourself if your project needs them.
How to use it
Drop the .glb, or the .gltf with its files, choose Convert and React (JSX), and press Convert. If you also want a smaller GLB, choose Optimize: the component is written from the optimized model, so the two always match.
Names are the ones three.js gives the model when it loads: spaces become underscores, dots are removed, and repeated names get a number. The component is written from what three.js produces, so the lookups match what useGLTF returns.
Compression
If the GLB uses Meshopt, useGLTF decodes it without any setup. If it uses Draco, drei loads a decoder from a CDN by default, and a comment at the top of the file says how to host it yourself.
What it does not do
A model with animations or a skeleton needs wiring a list of meshes cannot give, so for those the component renders the scene as it is and says so in a note. Meshes without a name cannot be looked up, which leads to the same fallback. The component renders the model; it does not add lights, controls or a canvas.
Transparency
What leaves your device
No model is uploaded. Everything runs in your browser; the compression engines and the validator are downloaded from this site the first time they are needed. What is recorded.
3D guides
Related 3D jobs
Questions
Asked often
Is the component JSX or TSX?
JSX. Rename it and add types if your project is TypeScript.
Where do I put model.glb?
In your public folder, so that /model.glb works, or change the path in Model.jsx.
Does it work with Draco and Meshopt files?
Yes. Meshopt needs no setup in drei. For Draco, drei loads a decoder from a CDN unless you host your own, and the file explains how.
Why are some mesh names different from the ones in Blender?
three.js changes names when it loads a model: spaces become underscores, dots are removed and repeats get a number. The component uses the changed names, which are the ones that work.
What about animations?
The component renders the whole scene and the animations are in the object useGLTF returns. A list of meshes is not enough to play them.
Is my model uploaded?
No. The component is written in your browser.