Menü
Sync UI elements outside the Canvas with the render loop using R3F v10's external useFrame.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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.
| name | ui-useframe |
| description | Sync UI elements outside the Canvas with the render loop using R3F v10's external useFrame. |
Sync UI elements outside the Canvas with the render loop using R3F v10's external useFrame.
Since React Three Fiber v10, useFrame can be used outside of the Canvas component. This allows updating DOM elements in sync with the 3D scene without using Drei's Html component.
useFrame works outside <Canvas> in R3F v10+{ fps: N } option since DOM manipulation is expensiveconst Ui = () => {
const ref = useRef<HTMLDivElement>(null)
useFrame(() => {
ref.current.innerText = `${position.x.toFixed(2)}, ${position.y.toFixed(2)}`
}, { fps: 10 })
return <div ref={ref} className="fixed top-4 right-4" />
}
// Place outside Canvas
<Canvas>
<Scene />
</Canvas>
<Ui />
This skill is part of verekia's r3f-gamedev.