Transform glb to jsx

Skill dor-rondel/agent-skills-mcp/resources/frontend/transform-glb-to-jsx

mcp server serving coding agent skills with helper tools

Install

npx -y skills add dor-rondel/agent-skills-mcp --skill transform-glb-to-jsx

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use this skill whenever the user asks to convert, transform, or generate a React component/JSX file from a 3D GLTF or GLB model asset.

SKILL.md

1.9 KB, as published. Nobody here has run it

3D Model Transformation Workflow (GLB to JSX)

This skill utilizes gltfjsx via pnpm dlx to convert 3D .glb or .gltf assets into optimized React Three Fiber / Drei components matching our React 19 and Three.js stack.

🛠️ Prerequisites & Context

Source Directory: Look for input assets typically in public/ or an asset folder.
Target Directory: Output components should generally go into the application components directory (e.g., components/ or app/components/).
Stack Rules: Ensure generated code uses TypeScript and matches React 19 / Three r170 conventions.

🏃‍♂️ Execution Blueprint

1. Basic Transformation

To generate a standard TypeScript component from a GLB asset, run:

pnpm dlx gltfjsx public/models/avatar.glb --types --output components/Avatar.tsx

2. Advanced / Optimized Transformation

If the model requires optimization (like Draco compression or texture resizing), append the necessary flags:

pnpm dlx gltfjsx public/models/avatar.glb --types --transform --output components/Avatar.tsx

📐 Common Flags Reference

--types or -t: Generates TypeScript types (Mandatory for this codebase).
--transform or -T: Optimizes the model (isolates meshes, resizes textures, compresses with Draco).
--output or -o: Specifies the output filename.
--shadows or -s: Injects shadow properties directly onto the generated meshes.

⚙️ Post-Transformation Rules

Verify Imports: Check that the generated file correctly imports hooks from @react-three/drei (e.g., useGLTF) and @react-three/fiber.
Prettier Check: Immediately run pnpm format on the newly generated .tsx file to align it with project style guidelines.