health-bars

What problem does it solve?

Health bars provide at-a-glance visibility of character survivability in 3D scenes; this skill demonstrates a simple pattern to render and animate health indicators above entities using React Three Fiber and Drei's Html component.

Core Features & Use Cases

• Use Drei's Html component to render health bars in 3D space above entities.
• Drive the bar width with a DOM element's scaleX via a ref inside useFrame for smooth, performant updates.
• Style the bars with CSS (gradients, borders, and color transitions) to clearly convey health status.
• Use-cases include player health, enemy HP indicators, or ally status overlays directly in the scene.

Quick Start

Place an Html container above the character and attach a ref to the inner bar that scales horizontally according to the health percentage.