pushback
Pushback
Make enemies flash white and rock back and forth when receiving damage.
Technique
Track pushback state with a direction vector and progress value. In useFrame, interpolate the position along the pushback direction using a back-and-forth curve, and change the material color to white during the effect.
Key Concepts
- Store pushback direction (
dx,dy) and progress (0 to 1) - Use a triangle wave for back-and-forth motion:
t < 0.5 ? t * 2 : (1 - t) * 2 - Flash material color to white during pushback
- Reset to original position and color when complete
- Direction should be opposite to the damage source (player position)
Usage
More from verekia/r3f-gamedev
smooth-interpolation
Animate values smoothly using exponential decay instead of linear interpolation.
12ui-useframe
Sync UI elements outside the Canvas with the render loop using R3F v10's external useFrame.
8r3f-setup
Set up a React Three Fiber project with WebGPU support.
7reactive-polling
Poll for changes to any value and trigger React re-renders when it changes.
7miniplex
Use Miniplex for minimalistic Entity Component System with TypeScript support.
6bone-attachment
Attach meshes to bones of a skinned mesh, such as attaching a sword to a character's hand.
6