gltfjsx is a toolkit that converts GLTF 3D model files into reusable React components for use with React-three-fiber and three.js scenes. It transforms the scene hierarchy of a GLTF file into a declarative component tree, generating type-safe TypeScript definitions for all nodes and materials to enable type-checked usage in React applications.
The tool extracts animation clips from GLTF files and exposes them as playable actions through a generated React hook, allowing developers to control animations imperatively. It also detects identical geometry and materials within a model and replaces them with instanced meshes, reducing draw calls for improved rendering performance. Additionally, gltfjsx provides a structure inspector that loads a model's scene hierarchy and material properties without binary data, useful for unit testing and debugging.
Beyond conversion, gltfjsx functions as a web optimization pipeline for 3D assets, compressing textures, deduplicating geometry, and pruning unused textures, animations, and nodes from GLB binaries to reduce file size for web delivery. The tool supports both command-line usage and a programmatic JavaScript API that accepts GLTF objects or scenes and returns JSX strings without CLI dependency.