health bars

📁 verekia/r3f-gamedev 📅 Jan 21, 2026

总安装量

周安装量

#77772

全站排名

安装命令

npx skills add https://github.com/verekia/r3f-gamedev --skill health-bars

Agent 安装分布

claude-code 4

windsurf 1

cursor 1

codex 1

Skill 文档

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

Html from @react-three/drei with center and distanceFactor props
Use refs to directly manipulate DOM styles for performance
scaleX transform 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.

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台