Hi, everyone! i created a 3d text clock using Three.js text geometry , and i want to update clock in real time, but when i do fps drops and starts lagging heavily, i guess because it renders whole 3d text every second , every time… is there a way to fix/optimize it? this is the CodeSandbox line 111, 112.
Text geometry is heavy, I don’t think you’ll want to rebuild it every second. If you need faster updates I’d use troika-three-text.
2 Likes
As @donmccurdy pointed out creating the text geometry every frame is heavy. I’d suggest you create/initiate the geometries before hand, one geometry by number, you’ll need ten geometries from 0 to 9, and reuse them while updating the timer.
2 Likes
that sounds complicated but right, thank you!
I updated your example to update the text geometry in the timer, not the render loop
three-clock (forked) - CodeSandbox
It seems to be related to your font. When I use a different font (helvetiker_regular.typeface), the frame rate is 60 as expected. I even changed the interval to 1000/60, it was still 60 FPS
There’s something weird about the font you are using that is very CPU heavy.
1 Like
i just checked my font was 2.50mb and yours is 66kb , that clearly was heavy on cpu rendering it every frame… and you moved it to constructor. thanks!