Gltfjsx

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.

Features

3D Model Converters - Converts GLTF 3D models into reusable React-three-fiber components with type-safe TypeScript definitions.

Declarative Three.js Component Generators - Maps GLTF nodes and materials directly to React-three-fiber JSX elements, preserving the scene hierarchy as a component tree.

Web Model Optimizers - Compresses textures, deduplicates geometry, and prunes assets to reduce file size for web delivery.

3D Model Type Definitions - Generating TypeScript definitions for 3D model nodes and materials to enable type-checked usage in React applications.

Web Optimizers - Optimizes 3D models for web delivery by compressing textures, deduplicating geometry, and pruning unused assets.

GLTF Animation Extractions - Extracts animation clips from GLTF files and exposes them as playable actions through a generated React hook.

Geometry Instancing - Detects identical geometry and materials in 3D models and replaces them with instanced meshes to reduce draw calls.

GLTF Animation Hooks - Parses GLTF animation tracks and exposes them as imperative play/stop actions via a generated useAnimations hook.

3D Scene Transpilations - Transforms GLTF scene graphs into React JSX components during a build step, eliminating runtime parsing overhead.

GLTF Structure Inspectors - Loads a GLTF file's scene hierarchy and material properties without binary data for unit testing and debugging.

GLTF-to-JSX Parsers - Parses GLTF objects or scenes into JSX programmatically without using command-line tools.

GLTF Structure Inspectors - Loads a GLTF file's scene hierarchy and material properties without binary data for unit testing and debugging.

Automatic Detectors - Automatically detects identical geometry and materials in 3D models and replaces them with instanced meshes.

GLTF Schema Type Inferences - Generates TypeScript interfaces for node names, material types, and geometry shapes by introspecting the GLTF JSON structure.

GLTF-to-JSX Transformers - Exposes a JavaScript function that accepts a GLTF object or scene and returns JSX strings without CLI dependency.

GLTF Asset Optimizers - Strips unused textures, animations, and nodes from the GLB binary while recompressing remaining assets for web delivery.

pmndrsgltfjsx

Features

Star history