damage-numbers
Damage Numbers
Display floating damage numbers that animate upward and fade out, with support for critical hits.
Technique
Use Drei's Html component to render DOM elements in 3D space. Manage damage numbers in React state, spawn them with random positions, and use CSS animations for the floating/fading effect.
Key Concepts
Htmlfrom@react-three/dreifor DOM-in-3D rendering- Track damages in state with unique IDs for keying
- Use
setTimeoutto remove damages after animation completes - CSS keyframe animations for movement and opacity
- Critical hits can have different styling (larger text, "CRIT" label)
Usage
<Html center position={[damage.x, damage.y, 0]}>
<div style={{ animation: 'damageNumber 1.3s ease-out forwards' }}>{damage.value}</div>
</Html>
This skill is part of verekia's r3f-gamedev.
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