health-bars
Installation
SKILL.md
Health Bars
Display health bars above characters using CSS styling.
Technique
Use Drei's Html component to render styled health bars in 3D space. Update the health bar width by manipulating the DOM element's transform: scaleX() via a ref in useFrame.
Key Concepts
Htmlfrom@react-three/dreiwithcenteranddistanceFactorprops- Use refs to directly manipulate DOM styles for performance
scaleXtransform for smooth width changes with CSS transitions- Style with CSS (gradients, borders, skew transforms)
Usage
const healthRef = useRef<HTMLDivElement>(null)
useFrame(() => {
healthRef.current.style.transform = `scaleX(${healthPercent})`
}, { fps: 1 })
<Html center position-y={1.5} distanceFactor={5}>
<div className="bg-red-500">
<div ref={healthRef} className="bg-green-500 origin-left transition-transform" />
</div>
</Html>
This skill is part of verekia's r3f-gamedev.
Related skills
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