tadams95/r3f-loaders
.claude/skills/r3f-loaders/SKILL.md
React Three Fiber asset loading - useGLTF, useLoader, Suspense patterns. Use when loading 3D models, textures, or managing loading states.
development
Updated Apr 15, 2026
$ install --global
skillsauthnpx skillsauth add tadams95/kardashev-network r3f-loadersInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 4:16 AM51.3s1 file scanned
SKILL.md
- name:
- r3f-loaders
- description:
- 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)
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.
Related Skills
tadams95/wagmi-viem
development
VerifiedTrustedCommunity
Web3 integration with wagmi and viem - wallet connection, contract interactions, transactions, RainbowKit. Use when implementing wallet features, reading/writing contracts, or handling blockchain transactions.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-textures
content-media
VerifiedTrustedCommunity
Three.js textures - loading, configuration, UV mapping, environment maps. Use when loading images, configuring texture properties, or working with HDR environments.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-shaders
data-ai
VerifiedTrustedCommunity
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-postprocessing
testing
VerifiedTrustedCommunity
Three.js post-processing - EffectComposer, bloom, depth of field, custom passes. Use when adding visual effects, screen-space effects, or enhancing rendered output.
SKILL.mdUpdated Apr 15, 2026