Debugging gLTF models with react-three-fiber

Just a quick tip for quickly finding node names, material names, etc. in a glTF model.

jsx
"use client";
 
import { useGLTF } from "@react-three/drei";
 
export const DebugModelStructure = ({ path }: { path: string }) => {
  const gltf = useGLTF(path);
  console.dir(gltf, { depth: null });
  return null;
};

I use this quite frequently when debugging models, especially third-party ones I haven't made myself.

Tip: You can also use gltfjsx to transform the glTF into a React component.