Best way to use html over the r3f canvas

[Josehower]

I have been trying to find the best way to have a health bar and other GUI related objects (loading bars, icons and menus) in HTML over the r3f canvas.

What I don't really understand, and hesitate a lot on how would be the best approach is when I try to animate the health bar.

usually in react I use requestAnimationFrame inside of the bar component to update the value. But seems to me that this may have performance issues having useFrame in the canvas and requestAnimationframe outside of the canvas.

should I have all these bars inside of the canvas or is it just ok having one requestAnimationFrame in addition to the useFrame.

any help is really appreciated.

ty

[drcmda]

i would not use a raf, r3f already has one that you can re-use, having two hurts performance. there is an addEffect export

useEffect(() => addEffect(() => ...), [])

this can be used outside of r3f and it will auto-cleanup.

other than that you can do something like this: https://github.com/pmndrs/racing-game/blob/414ff101d6c9d8682f219a7f2bfb615153670349/src/ui/Speed.jsx#L4-L27 look into that game in general for hints.

the most important thing is that you do not setstate fast updates. updating your bar 60 times a sec in a loop via setstate, you don't even need to continue working on the game after that because you have stolen 95% of the cpu's capacity. in the example above i mutate the html directly instead of going through react.

[Josehower]

Ty ill check this out.

Something that I have found unintuitive and kind of funny is all this time while learning React avoiding mutate stuff to end now avoiding setState as the plague. LoL

[Josehower]

amazing project by the way!!

[drcmda]

Something that I have found unintuitive and kind of funny is all this time while learning React avoiding mutate stuff to end now avoiding setState as the plague. LoL

yes, it's because you're working with a game loop now, the rules change a bit. i still use setstate for reactive stuff, flags, buttons, states, but not 60 times per second :-D

[Josehower]

ty for the clarification, I was avoiding setState as a rule of thumb, but now I know is more about the times per second you use it.

This will for sure improve the flexibility of the code I'll write.