How do I install the R3f Loaders skill?

Run npx skillmds@latest add majiayu000/r3f-loaders in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is R3f Loaders safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with R3f Loaders?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is R3f Loaders free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published R3f Loaders?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

R3f Loaders by majiayu000 — Agent Skill

Name: R3f Loaders
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

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.

---name: r3f-loadersdescription: React Three Fiber asset loading - useGLTF, useLoader, Suspense patterns. Use when loading 3D models, textures, or managing loading states.--- # 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 <primitive object={scene} /> } // 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 <primitive object={scene} /> } ``` ## Clone for Multiple Instances ```tsx 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) ```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 ( <mesh> <boxGeometry /> <meshBasicMaterial color="gray" wireframe /> </mesh> ) } function Scene() { return ( <Suspense fallback={<Fallback />}> <Model /> </Suspense> ) } ``` ## Progress Tracking ```tsx 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 ```tsx 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 ```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.

Frequently asked questions

R3f Loaders