skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

r3f-animation

Implement React Three Fiber animations using useFrame, GLTF clips, and spring physics.

1|Updated Aug 20, 2023
Search Tags:#animation#webgl#react-three-fiber#3d#gltf#spring-physics#useframe
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-animation-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r3f-animation
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/r3f-animation
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-animation-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, @react-spring/three, @use-gesture/react, zustand, three.

What problem does it solve? Animating 3D objects in React Three Fiber requires juggling frame loops, GLTF animation clips, physics-based motion, and performance constraints, and this Skill provides working patterns for each of these tasks. ## Core Features & Use Cases - Frame-Loop Animation: Use useFrame with delta time, render priorities, and clock-based oscillation for procedural motion. - GLTF Animation Playback: Play, crossfade, blend, and listen to GLTF animation clips with useAnimations, plus morph targets and skeletal bone control. - Spring Physics: Apply @react-spring/three springs, gesture-driven dragging, and chained animations for physics-based movement. - Use Case: Build a character controller that blends Idle, Walk, and Run animations based on movement speed, with a HUD that subscribes to Zustand state without causing animation jank. ## Quick Start Show me how to animate a rotating box and crossfade between GLTF animation clips in React Three Fiber.

Frequently Asked Questions about r3f-animation

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

FAQPage Schema
How do I animate objects in React Three Fiber?▼

Use the useFrame hook from @react-three/fiber, which runs every frame and provides state and delta time. Mutate a mesh ref directly, such as incrementing rotation by delta, to animate without triggering React re-renders.

How to play GLTF animations in React Three Fiber?▼

Load the model with useGLTF and pass its animations to useAnimations from @react-three/drei. Call actions[name].play() to start a clip, and use fadeIn/fadeOut with reset() to crossfade between animations.

What is the difference between useFrame and react-spring for R3F animation?▼

useFrame gives manual per-frame control suited for continuous or procedural motion, while @react-spring/three provides physics-based springs driven by mass, tension, and friction for interruptible, gesture-friendly transitions.

Why does my React Three Fiber animation stutter when state changes?▼

Stutter happens when React re-renders interrupt the frame loop. Use getState() or transient subscriptions inside useFrame instead of hooks, and isolate animated meshes from state-dependent UI components.

Can I control individual bones of a skinned GLTF model?▼

Yes, traverse the loaded scene to find SkinnedMesh objects, access their skeleton, and locate bones by name. You can then rotate bones in useFrame or attach objects like weapons directly to a bone.

Related Skills

Explore More Software Engineering Skills→
MonumentalSystemsMonumentalSystems
17

threejs

Mitigate GPU memory leaks and rendering inefficiencies in Three.js and React Three Fiber projects.

Official
Intermediate
fanguyunfanguyun

threejs-postprocessing

Configure bloom and depth-of-field post-processing effects in Three.js scenes.

Community
Intermediate
toilahuonggtoilahuongg

threejs-shaders

Author custom GLSL vertex and fragment shaders with Three.js ShaderMaterial.

Community
Advanced
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced