菜单
Display React Three Fiber floating damage numbers that animate upward and fade out, with support for critical hits.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use React Three Fiber camera shake when a player takes damage or on impacts for visual feedback.
Display React Three Fiber health bars above characters using Drei Html and CSS styling.
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.
| name | r3f-damage-numbers |
| description | Display React Three Fiber floating damage numbers that animate upward and fade out, with support for critical hits. |
Display floating damage numbers that animate upward and fade out, with support for critical hits.
Use Drei's Html component to render DOM elements in 3D space. Manage damage numbers in React state, spawn them with random positions, and use CSS animations for the floating/fading effect.
Html from @react-three/drei for DOM-in-3D renderingsetTimeout to remove damages after animation completes<Html center position={[damage.x, damage.y, 0]}>
<div style={{ animation: 'damageNumber 1.3s ease-out forwards' }}>{damage.value}</div>
</Html>
This skill is part of verekia's r3f-gamedev.