gltfjsx

gltfjsx is a command-line tool that takes a 3D model file in the GLTF or GLB format and converts it into a React component. GLTF is a standard file format for 3D scenes and models, and react-three-fiber is a library for displaying 3D content inside React applications. The problem gltfjsx solves is that dropping a raw GLTF file into a 3D scene is inflexible: you can only place the model once, you have to dig through its internal structure to change anything, and modifying parts of it tends to corrupt the original data.

When you run gltfjsx on a model, it reads the file, maps out all the meshes, materials, lights, cameras, and animations inside it, and produces a JSX file where each part of the model is a named element. That means you can place the same model multiple times in a scene without conflicts, hide or show individual parts based on conditions, change colors or swap out materials with a single line, and attach click or hover events to specific pieces of the model.

The tool also handles optimization. With the --transform flag it runs the model through a compression pipeline that typically reduces file size by 70 to 90 percent, handling draco compression for geometry, resizing textures to 1024x1024 in WebP format, and removing redundant data. It does not alter the original file; it produces a separate transformed copy.

Additional options include TypeScript type generation for the model's nodes and materials, auto-instancing to reduce rendering cost when the same geometry appears multiple times, and automatic wiring of animation clips into hooks so you can trigger and blend them from your React code.

The tool is run with npx and does not require a global install. It is part of the pmndrs (Poimandres) open source collective, which also maintains react-three-fiber and related libraries.