- name
- health-bars
- description
- Display health bars above characters using CSS styling.
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.