This Mortal Coil

3D Animation System Test

🎬 Animation Playback System

This page demonstrates the new animation controls for GLB files with embedded animations. The animation panel appears automatically when a model contains animations.

Features

  • Animation List - Clickable buttons for each animation in the model
  • Playback Controls - Play, Pause, Resume, and Stop buttons
  • Speed Control - Slider to adjust playback speed (0.25x to 2.0x)
  • Loop Modes - Once, Loop (repeat), or Ping-Pong (back-and-forth)
  • Visual Feedback - Active animation highlighted in gold/blue

Test Model: Chibiko with Animations

Load a GLB file with embedded animations. The animation controls will appear automatically in the control panel if animations are detected.

modelPath="/models/chibiko-anim2.glb" | controlTier="advanced" | Animation controls auto-shown
Loading model...

Usage Instructions

  1. Open Control Panel - Click the gear icon in the top-right corner
  2. Find Animations Section - Scroll down to see the "Animations" section (only appears if animations exist)
  3. Select Animation - Click any animation name button to start playback
  4. Adjust Speed - Use the slider to speed up (2.0x) or slow down (0.25x) playback
  5. Change Loop Mode - Choose Once (play once), Loop (repeat forever), or Ping-Pong (reverse at end)
  6. Pause/Resume - Use the Pause button to stop temporarily, Resume to continue
  7. Stop Animation - Click Stop to reset the animation to the beginning

How to Add Animations

1. Export from Blender

When exporting GLB from Blender, ensure:

  • ✓ Format: GLB Binary
  • ✓ Include: Animations checked
  • ✓ Animation: Export All Actions or select specific animations
  • ✓ Bake Animation: Checked (if using constraints/drivers)

2. Place in Public Directory

Copy your GLB file to public/models/

3. Use in ModelViewer

<ModelViewer 
  client:load
  modelPath="/models/your-model.glb"
  preset="studio"
  controlTier="advanced"
/>

Animation controls will appear automatically if the GLB contains animations!

Technical Details

  • Hook: useAnimations from @react-three/drei
  • State Management: AnimationState interface with names[], current, isPlaying, speed, loop
  • Control Methods:
    • playAnimation(name) - Start playing a specific animation
    • stopAnimation() - Stop and reset to beginning
    • pauseAnimation() - Pause without resetting
    • resumeAnimation() - Resume from paused state
    • setAnimationSpeed(speed) - Change playback speed
    • setAnimationLoop(loop) - Change loop mode
    • getAnimationState() - Get current animation state
  • Loop Modes:
    • once - Play once and stop (LoopOnce)
    • repeat - Loop forever (LoopRepeat)
    • pingpong - Reverse at end, back and forth (LoopPingPong)
  • Speed Range: 0.25x (slow motion) to 2.0x (double speed)

✅ Expected Behavior

  • ✅ Animation section only appears if model has animations
  • ✅ Active animation button highlighted in gold (light) or blue (dark)
  • ✅ Speed slider updates in real-time during playback
  • ✅ Loop mode changes apply to current animation
  • ✅ Pause/Resume preserves playback position
  • ✅ Stop resets animation to frame 0
  • ✅ Animation names match those exported from Blender

⚠️ Troubleshooting

No animations showing?

  1. Check that your GLB was exported with animations enabled in Blender
  2. Open the GLB in a 3D viewer (e.g., Windows 3D Viewer) to verify animations exist
  3. Ensure animation names are not empty in Blender
  4. Try re-exporting with "Export All Actions" checked

Animation not playing smoothly?

  • Try reducing animation speed if it appears choppy
  • Check browser console for Three.js warnings
  • Ensure your model isn't too high-poly (affects framerate)

Implementation Files

  • src/components/react/3d/scene/ModelScene.tsx - Animation state and control methods
  • src/components/react/3d/controls/AnimationControls.tsx - UI component
  • src/components/react/3d/scene/ModelViewer.tsx - Integration and callbacks