Menu
Poll for React Three Fiber value changes and trigger React re-renders when needed.
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.
Basé sur la classification professionnelle SOC
| name | r3f-reactive-polling |
| description | Poll for React Three Fiber value changes and trigger React re-renders when needed. |
Poll for changes to any value and trigger React re-renders when it changes.
Create a useReactive hook that uses useFrame to periodically check a selector function. When the value changes, update React state to trigger a re-render. In React Three Fiber 8, throttle manually with accumulated delta.
const useReactive = <T,>(selector: () => T, fps = 30): T => {
const [reactiveValue, setReactiveValue] = useState<T>(selector())
const previousValueRef = useRef(reactiveValue)
const elapsedRef = useRef(0)
useFrame((_, delta) => {
elapsedRef.current += delta
if (elapsedRef.current < 1 / fps) return
elapsedRef.current = 0
const newValue = selector()
if (previousValueRef.current !== newValue) {
previousValueRef.current = newValue
setReactiveValue(newValue)
}
})
return reactiveValue
}
// Usage
const isAboveZero = useReactive(() => position.y > 0)
This skill is part of verekia's r3f-gamedev.
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 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.
Animate React Three Fiber values smoothly using exponential decay instead of linear interpolation.