Skill Gallery
← スキル一覧に戻る
verekia

health-bars

by verekia

⚛️ React Three Fiber Game Dev Recipes

⭐ 17🍴 0📅 2026年1月22日
dreigamedevr3freactreact-three-fiberreactjsthree-jsthreejs
GitHubで見るManusで実行

SKILL.md

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

  • 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.

スコア

総合スコア

65/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20
✓LICENSE

ライセンスが設定されている

+10
○説明文

100文字以上の説明がある

0/10
○人気

GitHub Stars 100以上

0/15
✓最近の活動

3ヶ月以内に更新

+5
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

レビュー

💬

レビュー機能は近日公開予定です