weapon-trail
Weapon Trail
Create a ribbon trail effect that follows a weapon's movement.
Technique
Build a custom BufferGeometry that stores a history of positions in a ring buffer. Each frame, record the current world positions of trail points and update the geometry vertices to create a ribbon connecting all historical positions.
Key Concepts
- Define trail points (e.g., base and tip of weapon)
- Use a ring buffer to store position history efficiently
- Create geometry with proper UVs for texture mapping (gradient fade)
- Update vertex positions each frame with
positions.needsUpdate = true - Use
localToWorld()to get world positions from the target object - Support enabling/disabling with fade out animation
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