ReddRadar
Agent skill
r3f-loaders
React Three Fiber asset loading - useGLTF, useLoader, Suspense patterns. Use when loading 3D models, textures, or managing loading states.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/r3f-loaders
SKILL.md
React Three Fiber Loaders
useGLTF (Recommended)
import { useGLTF } from '@react-three/drei'
function Model() {
const { scene, nodes, materials, animations } = useGLTF('/models/robot.glb')
return <primitive object={scene} />
}
// Preload
useGLTF.preload('/models/robot.glb')
With Draco Compression
import { useGLTF } from '@react-three/drei'
function Model() {
const { scene } = useGLTF('/models/compressed.glb', true) // true enables Draco
return <primitive object={scene} />
}
Clone for Multiple Instances
import { Clone } from '@react-three/drei'
function Trees() {
const { scene } = useGLTF('/models/tree.glb')
return (
<>
<Clone object={scene} position={[0, 0, 0]} />
<Clone object={scene} position={[5, 0, 0]} />
<Clone object={scene} position={[-5, 0, 0]} />
</>
)
}
useLoader (Core)
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
import { Suspense } from 'react'
function Fallback() {
return (
<mesh>
<boxGeometry />
<meshBasicMaterial color="gray" wireframe />
</mesh>
)
}
function Scene() {
return (
<Suspense fallback={<Fallback />}>
<Model />
</Suspense>
)
}
Progress Tracking
import { useProgress, Html } from '@react-three/drei'
function Loader() {
const { progress, active } = useProgress()
return active ? (
<Html center>
<div>{progress.toFixed(0)}%</div>
</Html>
) : null
}
Process GLTF Content
function Model() {
const { scene } = useGLTF('/model.glb')
useEffect(() => {
scene.traverse((child) => {
if (child.isMesh) {
child.castShadow = true
child.receiveShadow = true
}
})
}, [scene])
return <primitive object={scene} />
}
Other Loaders
import { useFBX, useOBJ } from '@react-three/drei'
const fbx = useFBX('/model.fbx')
const obj = useOBJ('/model.obj')
TypeScript with gltfjsx
npx gltfjsx model.glb --types
Generates typed component with proper mesh/material access.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?