r3f-loaders

Load 3D models, textures, and HDR environments in React Three Fiber applications.

1|Updated Aug 20, 2023
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-loaders-imanlangaran
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: r3f-loaders
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/r3f-loaders
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-loaders-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, three.

What problem does it solve? Loading 3D assets like GLTF models, textures, and HDR environments into React Three Fiber scenes involves managing Suspense boundaries, caching, compression decoders, and loading states, which is error-prone without established patterns. ## Core Features & Use Cases - Model Loading: Load GLTF/GLB, FBX, OBJ, STL, and PLY models using useGLTF, useFBX, and useLoader with Draco compression support. - Texture & Environment Loading: Load color/normal/roughness maps, cube textures, video textures, and HDR environment presets with useTexture, useCubeTexture, and useEnvironment. - Loading State Management: Build progress indicators with useProgress, Suspense fallbacks, and the Drei Loader component, plus preloading and caching strategies. - Use Case: When building a product configurator that displays a Draco-compressed GLB model with PBR textures and a studio HDR environment, use these patterns to preload assets, show a progress bar, and handle errors gracefully. ## Quick Start Show me how to load a GLB model with textures and a loading progress indicator in my React Three Fiber scene.

Frequently Asked Questions about r3f-loaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load a GLTF model in React Three Fiber?

Use the useGLTF hook from @react-three/drei, which returns the scene, nodes, materials, and animations. Render the result with <primitive object={scene} /> inside a Suspense boundary, and call useGLTF.preload() to load it ahead of time.

How to show loading progress in React Three Fiber?

Use the useProgress hook from @react-three/drei to access progress percentage, loaded item count, and active state. Combine it with the Html component inside a Suspense fallback, or use the Drei Loader component as an HTML overlay outside the Canvas.

Does useGLTF support Draco compressed models?

Yes, Drei's useGLTF automatically handles Draco-compressed GLB files. You can also set a custom decoder path with useGLTF.setDecoderPath() or configure DRACOLoader manually when using the lower-level useLoader with GLTFLoader.

What is the difference between useGLTF and useLoader?

useGLTF is a Drei convenience hook specifically for GLTF/GLB files with built-in Draco support and caching. useLoader from @react-three/fiber is the generic primitive that works with any Three.js loader like TextureLoader, STLLoader, or PLYLoader.

How do I reuse a loaded model multiple times in a scene?

Use the Clone component from @react-three/drei to render multiple instances of a loaded GLTF scene at different positions and scales. Assets are automatically cached by URL, so repeated useGLTF calls with the same path share one cached asset.