# R3f Loaders
> React Three Fiber asset loading - useGLTF, useLoader, Suspense patterns. Use when loading 3D models, textures, or managing loading states.
- Skill: `majiayu000/r3f-loaders` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/r3f-loaders`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/r3f-loaders/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/r3f-loaders
---
# React Three Fiber Loaders
## useGLTF (Recommended)
```tsx
import { useGLTF } from '@react-three/drei'
function Model() {
const { scene, nodes, materials, animations } = useGLTF('/models/robot.glb')
return
}
// Preload
useGLTF.preload('/models/robot.glb')
```
## With Draco Compression
```tsx
import { useGLTF } from '@react-three/drei'
function Model() {
const { scene } = useGLTF('/models/compressed.glb', true) // true enables Draco
return
}
```
## Clone for Multiple Instances
```tsx
import { Clone } from '@react-three/drei'
function Trees() {
const { scene } = useGLTF('/models/tree.glb')
return (
<>
)
}
```
## useLoader (Core)
```tsx
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { TextureLoader } from 'three'
const gltf = useLoader(GLTFLoader, '/model.glb')
const texture = useLoader(TextureLoader, '/texture.jpg')
```
## Suspense Loading
```tsx
import { Suspense } from 'react'
function Fallback() {
return (
)
}
function Scene() {
return (
}>
)
}
```
## Progress Tracking
```tsx
import { useProgress, Html } from '@react-three/drei'
function Loader() {
const { progress, active } = useProgress()
return active ? (
{progress.toFixed(0)}%
) : null
}
```
## Process GLTF Content
```tsx
function Model() {
const { scene } = useGLTF('/model.glb')
useEffect(() => {
scene.traverse((child) => {
if (child.isMesh) {
child.castShadow = true
child.receiveShadow = true
}
})
}, [scene])
return
}
```
## Other Loaders
```tsx
import { useFBX, useOBJ } from '@react-three/drei'
const fbx = useFBX('/model.fbx')
const obj = useOBJ('/model.obj')
```
## TypeScript with gltfjsx
```bash
npx gltfjsx model.glb --types
```
Generates typed component with proper mesh/material access.