메뉴
Display React Three Fiber health bars above characters using Drei Html and CSS styling.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Use React Three Fiber camera shake when a player takes damage or on impacts for visual feedback.
Display React Three Fiber floating damage numbers that animate upward and fade out, with support for critical hits.
Display a React Three Fiber pulsing red vignette overlay when the player's health is low.
Make React Three Fiber enemies flash white and rock back and forth when receiving damage.
Poll for React Three Fiber value changes and trigger React re-renders when needed.
Animate React Three Fiber values smoothly using exponential decay instead of linear interpolation.
SOC 직업 분류 기준
| name | r3f-health-bars |
| description | Display React Three Fiber health bars above characters using Drei Html and CSS styling. |
Display health bars above characters using CSS styling.
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. In projects on React Three Fiber 8, throttle manually with accumulated delta instead of passing an { fps } options object to useFrame.
Html from @react-three/drei with center and distanceFactor propsscaleX transform for smooth width changes with CSS transitionsconst healthRef = useRef<HTMLDivElement>(null)
const elapsedRef = useRef(0)
useFrame((_, delta) => {
elapsedRef.current += delta
if (elapsedRef.current < 1 / 15) return
elapsedRef.current = 0
healthRef.current.style.transform = `scaleX(${healthPercent})`
})
<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.