Menu
Display health bars above characters using CSS styling.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Poll for changes to any value and trigger React re-renders when it changes.
Day-to-day coding style and patterns for R3F game development with Miniplex ECS.
Verekia's preferred project setup with Next.js Pages Router, Tailwind 4, oxfmt, oxlint, and TypeScript.
Use Zustand as a simple state store for entity management (not a true ECS).
Attach meshes to bones of a skinned mesh, such as attaching a sword to a character's hand.
Shake the camera when the player takes damage or on impacts for visual feedback.
Basé sur la classification professionnelle SOC
| name | health-bars |
| description | Display health bars above characters using 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.
Html from @react-three/drei with center and distanceFactor propsscaleX transform for smooth width changes with CSS transitionsconst 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.