R3f Loaders

This handles all your asset loading needs in React Three Fiber, from GLTF models to textures and HDR environments. The skill covers useGLTF from drei (the standard way to load 3D models), the core useLoader hook for any Three.js asset, and specialized hooks like useTexture, useEnvironment, and useVideoTexture. You get solid patterns for Suspense fallbacks, preloading strategies, and handling Draco compression. The gltfjsx integration for TypeScript is especially useful if you need type safety around your model nodes and materials. It's comprehensive without being overwhelming, giving you both quick examples and production patterns like traversing scenes to enable shadows or configuring texture wrapping.

skills.sh installs: 2K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-loaders --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber loaders

Inspect installed Fiber, Drei, Three.js, and React versions first. Examples use Fiber 9 / React 19. Verify actual asset paths, node names, formats, and compression; do not invent a model's structure.

Load and reuse a model

Mount below Canvas. Supply /models/robot.glb in the application. These clones have separate object transforms but intentionally share cached geometry/materials.

import { Suspense } from 'react'
import { Clone, useGLTF } from '@react-three/drei'

function Models() {
  const { scene } = useGLTF('/models/robot.glb')
  return (
    <group dispose={null}>
      <Clone object={scene} position={[-1.2, 0, 0]} />
      <Clone object={scene} position={[1.2, 0, 0]} />
    </group>
  )
}

export default function Example() {
  return (
    <Suspense fallback={null}>
      <Models />
    </Suspense>
  )
}